<template>
  <div class="mapMain">
    <div id="popup1" class="ol-popup" v-drag v-show="popxy">
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th>要素名称</th>
                <td colspan="2">{{ popdata.hjys }}</td>
              </tr>
              <tr>
                <th width="25%">要素细类</th>
                <td colspan="2">{{ popdata.ysxl }}</td>
              </tr>
              <tr>
                <th>分区编码</th>
                <td colspan="2">{{ popdata.fqbm }}</td>

              </tr>
              <tr>
                <th>地州/师</th>
                <td colspan="2">{{ popdata.djmc }}</td>

              </tr>
              <tr>
                <th>县市/团</th>
                <td colspan="2">{{ popdata.xmc }}</td>
              </tr>
              <tr>
                <th>自治区/兵团</th>
                <td colspan="2">{{ popdata.smc }}</td>
              </tr>

              <tr>
                <th>面积</th>
                <td colspan="2">{{ popdata.area }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div style="margin-top: 5px">
        <el-button type="success" size="mini" style="float: right" round @click="guanKongInfo3()">管控信息</el-button>
      </div>
    </div>
    <div id="popup2" class="ol-popup" v-show="popxy1" v-drag>
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th>单元名称</th>
                <td colspan="2">{{ pop1data.hjys }}</td>
              </tr>
              <tr>
                <th width="25%">单元编码</th>
                <td colspan="2">{{ pop1data.fqbm }}</td>
              </tr>
              <tr>
                <th>地州/师</th>
                <td colspan="2">{{ pop1data.djmc }}</td>

              </tr>
              <tr>
                <th>县市/团</th>
                <td colspan="2">{{ pop1data.xmc }}</td>
              </tr>
              <tr>
                <th>自治区/兵团</th>
                <td colspan="2">{{ pop1data.smc }}</td>
              </tr>

              <tr>
                <th>面积</th>
                <td colspan="2">{{ pop1data.area }}</td>
              </tr>
              <tr>
                <th>备注</th>
                <td colspan="2">{{ pop1data.remakes }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div style="margin-top: 5px">
        <el-button type="success" size="mini" style="float: right" round @click="guanKongInfo2()">管控信息</el-button>
      </div>
    </div>
    <div id="popup3" class="ol-popup" v-show="popxy2" style="width: 440px" v-drag>
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th width="30%">要素细类</th>
                <td colspan="2">{{ popdata2.ysxl }}</td>
              </tr>
              <tr>
                <th>分区编码</th>
                <td colspan="2">{{ popdata2.fqbm }}</td>
              </tr>
              <tr>
                <th>自治区/兵团</th>
                <td colspan="2">{{ popdata2.smc }}</td>
              </tr>
              <tr>
                <th>地州/师</th>
                <td colspan="2">{{ popdata2.djmc }}</td>
              </tr>
              <tr>
                <th>县市/团</th>
                <td colspan="2">{{ popdata2.xmc }}</td>
              </tr>
              <tr>
                <th>河段名称</th>
                <td colspan="2">{{ popdata2.LYMC }}</td>
              </tr>
              <tr>
                <th>流域名称</th>
                <td colspan="2">{{ popdata2.HDMC }}</td>
              </tr>
              <tr>
                <th>控制断面起点经度</th>
                <td colspan="2">{{ popdata2.KZDMQDJD }}</td>
              </tr>
              <tr>
                <th>控制断面起点纬度</th>
                <td colspan="2">{{ popdata2.KZDMQDWD }}</td>
              </tr>
              <tr>
                <th>控制断面终点经度</th>
                <td colspan="2">{{ popdata2.KZDMZDJD }}</td>
              </tr>
              <tr>
                <th>控制断面终点纬度</th>
                <td colspan="2">{{ popdata2.KZDMZDWD }}</td>
              </tr>
              <tr>
                <th colspan="1">面积</th>
                <td colspan="2">{{ popdata2.area }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--<div style="margin-top: 5px">
        <el-button type="success" size="mini" style="float: right" round @click="guanKongInfo()">管控信息</el-button>
      </div>-->
      <div style="margin-top: 5px">
        <el-button type="success" size="mini" style="float: right" round @click="guanKongInfo4()">管控信息</el-button>
      </div>
    </div>
    <div id="popuphldm" class="ol-popup" v-show="popxyhldm" v-drag>
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th>所在师市</th>
                <td>{{ pophldmdata.ss }}</td>
              </tr>
              <tr>
                <th>所在河流/湖库</th>
                <td>{{ pophldmdata.szhlhk }}</td>
              </tr>
              <tr>
                <th>断面名称</th>
                <td>{{ pophldmdata.dmmc }}</td>
              </tr>
              <tr>
                <th>2025国家考核目标</th>
                <td>{{ pophldmdata.gjkhmb }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="popuphk" class="ol-popup" v-show="popxyhk" v-drag>
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th>所在师市</th>
                <td>{{ pophkdata.ss }}</td>
              </tr>
              <tr>
                <th>点位名称</th>
                <td>{{ pophkdata.dwmc }}</td>
              </tr>
              <tr>
                <th>所在水体</th>
                <td>{{ pophkdata.szst }}</td>
              </tr>
              <tr>
                <th>2025国家考核目标</th>
                <td>{{ pophkdata.gjkhmb }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="popupjc" class="ol-popup" v-show="popxyjc" v-drag style="width:440px">
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th>所在地区</th>
                <td>{{ jiancedata.地区 }}</td>
                <th>站点名称</th>
                <td>{{ jiancedata.站点名称 }}</td>
              </tr>
              <tr>
                <th>SO2年均浓度</th>
                <td>{{ jiancedata.SO2年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率 }}</td>
              </tr>
              <tr>
                <th>NO2年均浓度</th>
                <td>{{ jiancedata.NO2年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_1 }}</td>
              </tr>
              <tr>
                <th>PM10年均浓度</th>
                <td>{{ jiancedata.PM10年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_2 }}</td>
              </tr>
              <tr>
                <th>PM2.5年均浓度</th>
                <td>{{ jiancedata.PM25年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_3 }}</td>
              </tr>
              <tr>
                <th>CO日平均第95百分位数</th>
                <td>{{ jiancedata.CO日平均第95百分位数 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_4 }}</td>
              </tr>
              <tr>
                <th>8小时最大平均第90百分位数</th>
                <td>{{ jiancedata.O3日8小时最大平均第90百分位数 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_5 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="popup" class="ol-popup" style="display: none">
      <div id="popup-content"></div>
    </div>
    <div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;">
      <a href="#" @click="closePop3d" class="popx">x</a>
      <div style="overflow-y:auto;height:400px" id="tableContainer">
        <table id="tab">
          <tbody>
            <tr>
              <th>单元名称</th>
              <td colspan="2">{{ pop1data3d.hjys }}</td>
            </tr>
            <tr>
              <th width="30%">单元编码</th>
              <td colspan="2">{{ pop1data3d.fqbm }}</td>
            </tr>
            <tr>
              <th>地州/师</th>
              <td colspan="2">{{ pop1data3d.djmc }}</td>
            </tr>
            <tr>
              <th>县市/团</th>
              <td colspan="2">{{ pop1data3d.xmc }}</td>
            </tr>
            <tr>
              <th>自治区/兵团</th>
              <td colspan="2">{{ pop1data3d.smc }}</td>
            </tr>
            <tr>
              <th>面积</th>
              <td colspan="2">{{ pop1data3d.area }}</td>
            </tr>
            <tr>
              <th>备注</th>
              <td colspan="2">{{ pop1data3d.remakes }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div id="map">
      <el-card class="box-card" id="guanKong"
        style="width:30%;position: absolute;z-index: 99999999;left: 31%;top: 16%;overflow:auto;max-height: 80%"
        v-show="gKShow">
        <div slot="header" class="clearfix">
          <span>管控信息</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="gKShow = false">关闭</el-button>
        </div>
        <div class="text item">
          <p style="font-size: 16px;color: green">空间布局约束</p>
          <span style="font-size: 14px">{{ kongJianYueS }}</span>
        </div>
        <div class="text item">
          <p style="font-size: 16px;color: green">污染物排放管控</p>
          <span style="font-size: 14px">{{ wuRanGuanK }}</span>
        </div>
        <div class="text item">
          <p style="font-size: 16px;color: green">环境风险防控</p>
          <span style="font-size: 14px">{{ huanJingFangk }}</span>
        </div>
        <div class="text item">
          <p style="font-size: 16px;color: green">资源利用效率</p>
          <span style="font-size: 14px">{{ ziYuanLiY }}</span>
        </div>
      </el-card>
    </div>
    <div id="warntitle" style="position:absolute;bottom: 17px;right: 35%">
      <el-alert title="图中边界为工作参考界线，不作为定界依据   " type="warning" show-icon>
      </el-alert>
    </div>
    <div id="cesiumContainer" style="display: none"></div>
    <!--    <div id="toolControl" style="position: absolute; right:2%;top: 5%;padding-top: 8px;padding-bottom: 8px;z-index: 999999;">-->
    <!--      <el-button type="primary" icon="el-icon-edit" circle></el-button>-->
    <!--    </div>-->
    <div id="toptool">
      <el-row :gutter="24">
        <el-col :span="5"> <el-select v-model="shiValue" placeholder="可选择定位区划" @change="changeShi">
            <el-option v-for="item in quHua" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select></el-col>
        <el-col :span="6"> <el-input placeholder="可输入要素编码进行查询" v-model="chaXunBm" id="chaxunbm" class="input-with-select"
            style="width: 230px;">
            <el-button slot="append" icon="el-icon-search" @click="chaXunBmClick(chaXunBm)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="10" style="padding-top: 5px"> <span style=" font-weight: normal;font-size: 16px">
            经度：</span><el-input size="mini" v-model="jdu" oninput="value=value.replace(/[^0-9.]/g,'')"
            class="inputPoint"></el-input>°
          <el-input size="mini" v-model="jfen" oninput="value=value.replace(/[^0-9.]/g,'')"
            class="inputPoint"></el-input>′
          <el-input size="mini" v-model="jmiao" oninput="value=value.replace(/[^0-9.]/g,'')"
            class="inputPoint"></el-input>″
          <span style="font-weight: normal;font-size: 16px"> 纬度：</span><el-input
            oninput="value=value.replace(/[^0-9.]/g,'')" v-model="wdu" class="inputPoint"></el-input>°
          <el-input size="mini" v-model="wfen" oninput="value=value.replace(/[^0-9.]/g,'')"
            class="inputPoint"></el-input>′
          <el-input size="mini" v-model="wmiao" oninput="value=value.replace(/[^0-9.]/g,'')"
            class="inputPoint"></el-input>″
        </el-col>
        <el-col :span="3" style="padding-top: 6px">
          <el-button type="goon" style="padding: 5px;width: 40px;height: 30px;margin-left: -25px;border-radius: 10px"
            size="small" round @click="hzPoint">定位</el-button>
          <el-button type="goon" style="padding: 5px;width: 40px;height: 30px;margin-left: 5px;border-radius: 10px"
            size="small" round @click="clearPoint">清除</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="toolbar" class="tool-bar" v-bind:class="{ 'param-container': infoZkTo }"
      style="position: absolute; left:1%;top:8%;z-index:  999;">
      <div id="toolcontrol" style="display: inline-block">
        <el-button @click="infoZkTo = !infoZkTo" type="goon" icon="iconfont icon-gongju" circle></el-button>
      </div>
      <div id="othertool" style="display: inline-block">
        <div id="tools" style="float: left">
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="ceju">测距</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="cemian">测面</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="hxcx">画线查询</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="hmcx">画面查询</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="qingchu">清除</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="yingxiang">{{ yingx }}</el-button>
          <!--<el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="zhuanti">面积专题图</el-button>-->
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="hot"
            v-loading.fullscreen.lock="fullscreenLoading">{{ hotname }}</el-button>

        </div>
        <div id="sanweitools" style="float: left;display: none">
          <el-select v-model="liangsuan" placeholder="请选择量算方式" @change="changeLiangSuan">
            <el-option v-for="item in lsData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="ceju3D" id="distance">测距</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="cemian3D" id="area">测面</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="cegao3D" id="height">测高</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="clear3D" id="clear">清除</el-button>
          <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="getPic">场景出图</el-button>
        </div>
        <el-button v-show="infoZkTo" class="tlb" type="text" size="mini" @click="sanwei">{{ sw3d }}</el-button>
      </div>
    </div>
    <div style="position: absolute; bottom: 1%;left: 23%;z-index: 99999;width: 30%;height: 30px;">
      <span class="jwd1" style="font-size: 16px;">经度:{{ jdd }}</span> &nbsp;&nbsp;
      <span class="jwd2" style="font-size: 16px;">纬度:{{ wdd }}</span>
    </div>
    <el-button type="primary" style="position: absolute;bottom: 1%;left: 1%" v-show="tlbtnshow" @click="tuliShow"
      size="medium" id="tulishow">显示图例</el-button>
    <el-button type="primary" style="position: absolute;bottom: 1%;left: 1%;display: none" v-show="tlbtnshow3D"
      @click="tuliShow3D" size="medium" id="tulishow3D">显示图例</el-button>
    <el-card class="box-card"
      style="background-color: #fff;z-index: 99999;position: absolute;bottom: 2%;left: 1%;max-width: 600px"
      v-show="tlshow">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px;color:#4b4e53">图例</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="closeTl">关闭</el-button>
      </div>
      <!--&lt;!&ndash;<div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(255, 0 ,0);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">生态保护红线</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left: 105px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">一般生态空间</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left: 138px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">其它</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(236, 27 ,36);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">水环境优先保护区</span></div>
        <el-button style="float: left;background-color:rgb(230, 152 ,0);margin-left: 73px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">水环境城镇生活污染重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(168, 112 ,0);margin-left: 10px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">水环境工业污染重点管控区</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(255, 255 ,0);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">水环境农业污染重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(222, 158 ,102);margin-left:10px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">水环境其它重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left:73px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">水环境一般管控区</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(236, 27 ,36);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">大气环境优先保护区</span></div>
        <el-button style="float: left;background-color:rgb(168, 112 ,0);margin-left:58px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">大气环境高排放重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(222, 158 ,102);margin-left:41px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">大气环境布局敏感重点管控区</span></div>

      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(255, 255 ,0);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">大气环境弱扩散重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(245, 122 ,122);margin-left: 10px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">大气环境受体敏感重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left: 25px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">大气环境一般管控区</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(236, 27 ,36);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">土壤环境优先保护区</span></div>
        <el-button style="float: left;background-color:rgb(255, 255 ,0);margin-left: 58px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">土壤环境重点保护区</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left: 89px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">土壤环境一般保护区</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(75, 93 ,170);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">地下水开采重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(230, 152 ,0);margin-left: 42px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">土地资源重点管控区</span></div>
        <el-button style="float: left;background-color:rgb(184, 66 ,48);margin-left: 89px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">高污染燃料禁燃区</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(0, 112 ,255);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">生态用水补给区</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left: 90px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">自然资源一般管控区</span></div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(255, 120 ,120);"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">优先保护单元</span></div>
        <el-button style="float: left;background-color:rgb(255, 255 ,0);margin-left: 106px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">重点管控单元</span></div>
        <el-button style="float: left;background-color:rgb(0, 165 ,80);margin-left: 139px"></el-button>&emsp;<div style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">一般管控单元</span></div>
      </div>&ndash;&gt;-->
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('EcoRedline兵团')">
        <el-button style="float: left;background-color:rgb(38,115 ,0);border-color: rgb(255, 0, 0);"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">生态保护红线</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('EcoGenSpace兵团')">
        <el-button style="float: left;background-color:rgb(77, 230 ,2)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">一般生态空间</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('EcoGen兵团')">
        <el-button style="float: left;background-color:rgb(252, 215 ,8)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">其它区域</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('HydroPriority兵团')">
        <el-button style="float: left;background-color:rgb(77, 230 ,2)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">水环境优先保护区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('HydroKeyAngriculture兵团')">
        <el-button style="float: left;background-color:rgb(238, 127 ,58);"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">水环境农业污染重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('HydroKeyIndustry兵团')">
        <el-button style="float: left;background-color:rgb(168	,21	,50)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">水环境工业污染重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('HydroKeyUrban兵团')">
        <el-button style="float: left;background-color:rgb(230	,76,	4)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">水环境城镇生活污染重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('HydroKeyOther兵团')">
        <el-button style="float: left;background-color:rgb(222, 158 ,102)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">水环境其它重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('HydroGen兵团')">
        <el-button style="float: left;background-color:rgb(246, 235 ,171)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">水环境一般管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('AtomsPriority兵团')">
        <el-button style="float: left;background-color:rgb(77	,230	,2)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">大气环境优先保护区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('AtomsKeyHighEmission兵团')">
        <el-button style="float: left;background-color:rgb(168, 21 ,50)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">大气环境高排放重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px"
        v-show="ifTuliShow('AtomsKeyLayoutSensitive兵团')">
        <el-button style="float: left;background-color:rgb(230, 76 ,4)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">大气环境布局敏感重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px"
        v-show="ifTuliShow('AtomsKeyWeakDiffusion兵团')">
        <el-button style="float: left;background-color:rgb(238, 127 ,58)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">大气环境弱扩散重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px"
        v-show="ifTuliShow('AtomsKeyReceptorSensitive兵团')">
        <el-button style="float: left;background-color:rgb(245, 122 ,122)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">大气环境受体敏感重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('AtomsGen兵团')">
        <el-button style="float: left;background-color:rgb(246, 235 ,171)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">大气环境一般管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('FarmPriority兵团')">
        <el-button style="float: left;background-color:rgb(77, 230 ,2)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">土壤环境优先保护区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px"
        v-show="ifTuliShow('SoilRiskKeyFarmRiskKey兵团')">
        <el-button style="float: left;background-color:rgb(245, 122 ,122)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">土壤环境重点保护区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('SoilRiskGen兵团')">
        <el-button style="float: left;background-color:rgb(246, 235 ,171)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">土壤环境一般保护区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px"
        v-show="ifTuliShow('NRKeyGroundWaterExploKey兵团')">
        <el-button style="float: left;background-color:rgb(75, 93 ,170)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">地下水开采重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('NRKeyLandReourceKey兵团')">
        <el-button style="float: left;background-color:rgb(230, 152 ,0)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">土地资源重点管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px"
        v-show="ifTuliShow('NRKeyHighPolluFuelForbid兵团')">
        <el-button style="float: left;background-color:rgb(184, 66 ,48)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">高污染燃料禁燃区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('NRKeyEcoWaterSupply兵团')">
        <el-button style="float: left;background-color:rgb(0, 112 ,255)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">生态用水补给区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('NRGen兵团')">
        <el-button style="float: left;background-color:rgb(0, 165 ,80)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">自然资源一般管控区</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('优先')">
        <el-button style="float: left;background-color:rgb(77, 230 ,2)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">优先保护单元</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('重点')">
        <el-button style="float: left;background-color:rgb(245, 122 ,122)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">重点管控单元</span></div>
      </div>
      <div style="margin-bottom: 30px;height: 3px;float: left;width: 280px" v-show="ifTuliShow('一般')">
        <el-button style="float: left;background-color:rgb(246, 235 ,171)"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;height: 26px"> <span style="height: 16px">一般管控单元</span></div>
      </div>
    </el-card>
    <el-card class="box-card"
      style="background-color: #fff;z-index: 99999;position: absolute;bottom: 2%;left: 1%;max-width: 600px"
      v-show="tlshow3D">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px;color:#4b4e53">图例</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="closeTl3D">关闭</el-button>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(255, 120 ,120);"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">优先保护单元</span>
        </div>
      </div>
      <div class="text item buttonstyle" style="height: 40px">
        <el-button style="float: left;background-color:rgb(255, 255 ,0);"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">重点管控单元</span>
        </div>
      </div>
      <div class="text item buttonstyle" style="height: 20px">
        <el-button style="float: left;background-color:rgb(0, 165 ,80);"></el-button>&emsp;<div
          style="float: left;margin-left: 10px;margin-top: -7px;height: 26px"> <span style="height: 16px">一般管控单元</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" id="rightCard"
      style="background-color: #fff;border: 1px solid #04F7f9;overflow:auto;max-height: 99%;height: 99%;position: absolute;width: 30%;left: 70%"
      v-show="infoZk">
      <div slot="header" class="clearfix">
        <span style="color: #000">{{ info.name }}</span>
        <el-button style="float: right; padding: 3px 0;" type="text" @click="guanbiInfo">关闭</el-button> &emsp;
        <!--<el-button style="float: right; padding: 3px 0;" type="text" @click="clearInfo">清空</el-button>-->
      </div>
      <!-- <div class="text item">
         <el-checkbox v-model="info.yxchecked" @change="changgeyx" ><span style="font-size: 16px;color:#04F7F9">-生态保护红线({{info.Numyx}}个)</span></el-checkbox><br><br>
         <span style="color: #fff;font-size: 14px">该区域中有生态保护红线{{info.Numyx}}个：<a href="#" v-for="(item,k) in info.yxList" class="spana" :key="k" @click="dingwei(item.feature)">{{item.name}}</a></span>
       </div>
       <div class="text item" style="margin-top: 15px">
         <el-checkbox v-model="info.zdchecked" @change="changgezd" ><span style="font-size: 16px;color:#04F7F9">-环境质量底线({{info.Numzd}}个)</span></el-checkbox><br><br>
         <span style="color: #fff;font-size: 14px">该区域中有环境质量底线{{info.Numzd}}个：<a href="#" v-for="(item,k) in info.zdList" class="spana" :key="k"  @click="dingwei(item.feature)">{{item.name}}</a></span>
       </div>
       <div class="text item" style="margin-top: 15px">
         <el-checkbox v-model="info.ybchecked" @change="changgeyb" ><span style="font-size: 16px;color:#04F7F9">-资源利用上线({{info.Numyb}}个)</span></el-checkbox><br><br>
         <span style="color: #fff;font-size: 14px">该区域中有资源利用上线{{info.Numyb}}个：<a href="#" v-for="(item,k) in info.ybList" class="spana" :key="k"  @click="dingwei(item.feature)">{{item.name}}</a></span>
       </div>
     <div style="margin-top: 20px" >
     <div class="text item">
       <el-checkbox v-model="info.yxchecked1" @change="changgeyx1" ><span style="font-size: 16px;color:#04F7F9">-优先保护单元({{info.Numyx1}}个)</span></el-checkbox><br><br>
       <span style="color: #fff;font-size: 14px">该区域中有优先保护单元{{info.Numyx1}}个：<a href="#" v-for="(item,k) in info.yxList1" class="spana" :key="k" @click="dingwei1(item.feature)">{{item.name}}</a></span>
     </div>
     <div class="text item" style="margin-top: 15px">
       <el-checkbox v-model="info.zdchecked1" @change="changgezd1" ><span style="font-size: 16px;color:#04F7F9">-重点管控单元({{info.Numzd1}}个)</span></el-checkbox><br><br>
       <span style="color: #fff;font-size: 14px">该区域中有重点管控单元{{info.Numzd1}}个：<a href="#" v-for="(item,k) in info.zdList1" class="spana" :key="k"  @click="dingwei1(item.feature)">{{item.name}}</a></span>
     </div>
     <div class="text item" style="margin-top: 15px">
       <el-checkbox v-model="info.ybchecked1" @change="changgeyb1" ><span style="font-size: 16px;color:#04F7F9">-一般管控单元({{info.Numyb1}}个)</span></el-checkbox><br><br>
       <span style="color: #fff;font-size: 14px">该区域中有一般管控单元{{info.Numyb1}}个：<a href="#" v-for="(item,k) in info.ybList1" class="spana" :key="k"  @click="dingwei1(item.feature)">{{item.name}}</a></span>
     </div>
     </div>-->
      <div class="text item">
        <el-tabs type="border-card" v-model="ActiveName" @tab-click="yitabClick">
          <el-tab-pane v-for="(item, key) in chaxunData" :label="Object.keys(item)[0]" :name="Object.keys(item)[0]">
            <span slot="label">{{ Object.keys(item)[0] }} <el-badge :value="item[Object.keys(item)[0]].length"
                type="primary" class="item"> </el-badge></span>
            <el-table :data="item[Object.keys(item)[0]]" style="width: 100%">
              <el-table-column prop="hjdybm" label="编码" min-width="32%">
                <template slot-scope="scope">
                  <el-button type="text" @click="chaXunBmClick(scope.row.hjdybm)">{{ scope.row.hjdybm }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="hjdymc" label="名称" min-width="40%">
              </el-table-column>
              <el-table-column prop="city" label="所属师团" min-width="30%">
                <template slot-scope="scope">
                  <span>{{ scope.row.city }}-{{ scope.row.county }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import eventBus from '../../assets/js/eventBus'
import "../../assets/css/ol1.css";
import "../../assets/css/ol2.css";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile'
import ImageLayer from 'ol/layer/Image'
import * as control from 'ol/control';
import { Logo, TileSuperMapRest, LayerInfoService, SetLayerStatusParameters, LayerStatus, GetFeaturesByGeometryParameters, FeatureService, QueryByDistanceParameters } from '@supermap/iclient-ol';
import Polygon from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import LinearRing from 'ol/geom/LinearRing';
import Icon from 'ol/style/Icon';
import { QueryBySQLParameters, QueryService, QueryByGeometryParameters, GetFeaturesBySQLParameters, RankSymbol } from '@supermap/iclient-ol';
import { SetLayerStatusService } from '@supermap/iclient-common';
import GeoJSON from 'ol/format/GeoJSON';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Heatmap from 'ol/layer/Heatmap';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill';
import Overlay from 'ol/Overlay';
import CircleStyle from 'ol/style/Circle';
import Feature from 'ol/Feature';
import Text from 'ol/style/Text';
import LineString from 'ol/geom/LineString';
import Circle from 'ol/geom/Circle';
import Draw from 'ol/interaction/Draw';
import Pointer from 'ol/interaction/Pointer';
import * as olSphere from 'ol/sphere';
import Observable from 'ol/Observable';
import { unByKey } from 'ol/Observable';
import * as olExtent from 'ol/extent';
import echarts from "echarts";
import xj from "./xj.json";
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import * as olProj from 'ol/proj';
import { fromExtent } from 'ol/geom/Polygon';

var content = document.getElementById('popup-content');
//个性化图层
var hldmLayer, hkLayer, daqilianfangLayer, daqilianfangLayer2,jianceLayer;
//三维量算
var clampMode = 0; // 空间模式
var widget;
var jishu = 0;
var handlerDis, handlerArea, handlerHeight, xjSource;
var map, hxLayer, dxLayer, sxLayer, yxLayer, zdLayer, ybLayer, xjLayer, selectLayer, hxSource, dxSource, sxSource, yxSource, zdSource, ybSource, selectSouce, themeSource, heatMap;
var tempLayer = null, tempLayerID = null, tempLayerJishu = 0, shiLayer, tuanLayer;
var viewer;
var popO, pop1, pop2, pophldm, pophk, popjc;
var tdtslLayer, tdtbqLayer, tdtyxLayer, tdtyxzjLayer;
var draw;
var zhuangtai = 0;
var sketch;
var click = false;
var output = 0;
var lastPolygonLabelFeature; //记录上一个面标注要素
var lastLengthLabelFeature;
var lastCircleLabelFeature;
var source = new VectorSource();
var vector = new VectorLayer({
  source: source,
  style: new Style({
    fill: new Fill({ //面的填充颜色
      color: 'rgba(255, 0, 0, 0.1)'
    }),
    stroke: new Stroke({
      color: 'rgb(255,116,3)',
      width: 2
    }),
    image: new CircleStyle({
      radius: 3,
      stroke: new Stroke({
        color: 'rgba(255, 0, 0,1)',
        width: 2
      }),
      fill: new Fill({
        color: 'rgba(255,255,255)'
      })
    })
  })
});
var source1 = new VectorSource();
var vector1 = new VectorLayer({
  source: source1,
  style: new Style({
    fill: new Fill({ //面的填充颜色
      color: 'rgba(255, 0, 0, 0.1)'
    }),
    stroke: new Stroke({
      color: 'rgb(255,116,3)',
      width: 2
    }),
    image: new CircleStyle({
      radius: 3,
      stroke: new Stroke({
        color: 'rgba(255, 0, 0,1)',
        width: 2
      }),
      fill: new Fill({
        color: 'rgba(255,255,255)'
      })
    })
  })
});
var createTuanStyle = function (feature) {
  return new Style({
    text: new Text({
      //位置
      textAlign: 'center',
      //基准线
      textBaseline: 'middle',
      //文字样式
      font: 'normal 13px 微软雅黑',
      //文本内容
      text: feature.get('name'),
      backgroundStroke: new Stroke({
        color: '#00BBFF',
        width: 2
      }),
      backgroundFill: new Fill({
        color: '#00BBFF'
      }),
      padding: [1, 3, 0, 3],
      //文本填充样式（即文字颜色）
      fill: new Fill({
        color: '#ffffff'
      }),

    })
  });
};
var createLabelStyle = function (feature) {
  return new Style({
    text: new Text({
      //位置
      textAlign: 'center',
      //基准线
      textBaseline: 'middle',
      //文字样式
      font: 'normal 12px 微软雅黑',
      //文本内容
      text: feature.get('name'),
      backgroundStroke: new Stroke({
        color: '#AAAAAA',
        width: 2
      }),
      backgroundFill: new Fill({
        color: '#AAAAAA'
      }),
      padding: [1, 3, 0, 3],
      //文本填充样式（即文字颜色）
      fill: new Fill({
        color: '#FFFFFF'
      }),
    })
  });
};
var pointerMoveHandler = function (evt) {
  if (evt.dragging) {
    return;
  }
  var Coord;
  if (sketch) {
    var geom = sketch.getGeometry();
    if (geom instanceof Polygon) {
      if (lastPolygonLabelFeature) {   //鼠标移动 不停的添加和删除
        source.removeFeature(lastPolygonLabelFeature);
      }
      Coord = geom.getInteriorPoint().getCoordinates();    //新建一个要素ol.Feature
      var newFeature = new Feature({
        geometry: new Point(Coord), //几何信息
        name: output
      });
      lastPolygonLabelFeature = newFeature;
      newFeature.setStyle(createLabelStyle(newFeature, 0, 0));
      source.addFeature(newFeature);
    } else if (geom instanceof LineString) {
      if (lastLengthLabelFeature) {   //鼠标移动 不停的添加和删除
        source.removeFeature(lastLengthLabelFeature);
      }
      Coord = geom.getLastCoordinate();  //新建一个要素ol.Feature
      var newFeature = new Feature({
        geometry: new Point(Coord), //几何信息
        name: output
      });
      lastLengthLabelFeature = newFeature;
      newFeature.setStyle(createLabelStyle(newFeature, 35, -10));
      source.addFeature(newFeature);
    } else if (geom instanceof Circle) {
      if (lastCircleLabelFeature) {
        source1.removeFeature(lastCircleLabelFeature);
      }
      Coord = geom.getLastCoordinate();  //新建一个要素ol.Feature
      var newFeature = new Feature({
        geometry: new Point(Coord), //几何信息
        name: output
      });
      lastCircleLabelFeature = newFeature;
      newFeature.setStyle(createLabelStyle(newFeature, 35, -10));
      source1.addFeature(newFeature);
    }  //设置要素样式

  }
};
var formatLength = function (line) {
  var length = olSphere.getLength(line, {
    projection: 'EPSG:4326'
  });
  var output;
  if (length > 100) {
    output = (Math.round(length / 1000 * 100) / 100) + ' ' + '千米';
  } else {
    output = (Math.round(length * 100) / 100) +
      ' ' + '米';
  }
  return output;
};
var formatArea = function (polygon) {
  var area = olSphere.getArea(polygon, {
    projection: 'EPSG:4326'
  });
  var output;
  if (area > 10000) {
    output = (Math.round(area / 1000000 * 100) / 100) +
      ' ' + '平方千米';
  } else {
    output = (Math.round(area * 100) / 100) +
      ' ' + '平方米';
  }
  return output;
};
var createShiStyle = function (feature) {
  return new Style({
    text: new Text({
      textAlign: 'center',
      textBaseline: 'bottom',
      font: 'normal 15px 微软雅黑',
      text: feature.get('name'),
      padding: [1, 5, 0, 5],
      backgroundFill: new Fill({
        color: '#0099ff'
      }),
      fill: new Fill({
        color: '#ffffff'
      }),
    })
  });
};
var StyleHx = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(255, 0 ,0)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(255, 0 ,0, 0.7)'
    })
  });
};
var StyleHxQiTa = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(0, 165 ,80)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(0, 165 ,80, 0.7)'
    })
  });
};
var StyleShuiYX = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(236, 27 ,36)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(236, 27 ,36, 0.7)'
    })
  });
};
var StyleShuiGongYe = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(168, 112 ,0)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(168, 112 ,0, 0.7)'
    })
  });
};
var StyleShuiChengZhen = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(230, 152 ,0)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(230, 152 ,0, 0.7)'
    })
  });
};
var StyleShuiNongYe = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(255, 255 ,0)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(255, 255 ,0, 0.7)'
    })
  });
};
var StyleShuiQiTa = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(222, 158 ,102)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(222, 158 ,102, 0.7)'
    })
  });
};
var StyleDaQiShouTiMinGan = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(245, 122 ,122)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(245, 122 ,122, 0.7)'
    })
  });
};
var StyleShengTaiYongShui = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(0, 112 ,255)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(0, 112 ,255, 0.7)'
    })
  });
};
var StyleDiXiaShui = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(75, 93 ,170)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(75, 93 ,170, 0.7)'
    })
  });
};
var StyleGaoWuRanRanLiao = function (feature) {
  return new Style({
    stroke: new Stroke({
      //color: '#0033ff',
      color: 'rgb(184, 66 ,48)',
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(184, 66 ,48, 0.7)'
    })
  });
};
var container = document.getElementById('popup');
var overlay = new Overlay(({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
}));
var mystyle = new Style({
  fill: new Fill({
    color: "rgba(72,61,139, 0.4)",
  }),
  stroke: new Stroke({
    color: "#BDBDBD",
    width: 2
  })
});
var pSource = new VectorSource();
var pLayer = new VectorLayer({
  source: pSource,
  style: new Style({
    image: new Icon(({
      src: require('../../assets/img/markerbig_select.png')
    }))
  })
});
let webKey='b0f80d188ee3100e0327398d8afb39cd'
var projection = olProj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var resolutions = new Array(19);
var matrixIds = new Array(19);
		for(var z = 0; z < 19; z++) {
			// generate resolutions and matrixIds arrays for this WMTS
			//resolutions[z] = size / Math.pow(2, z);
			matrixIds[z] = z;
		}
		resolutions = [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125,
			0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 0.000010728836059570312, 0.000005364418029785156, 0.000002682209014892578, 0.000001341104507446289
		];
export default {
  name: 'showCusMap',
  data() {
    return {
      //互联网VPN方式新！！！
         url: "https://10.226.77.11/iserver/services/map-shp-sxydshp/rest/maps/sxydshp",
         dataurl: "https://10.226.77.11/iserver/services/data-shp-sxydshp/rest/data",
         tdtslurl:"https://10.226.77.11:8809/iserver/services/map-tianditu/rest/maps/矢量底图_经纬度",
         tdtbqurl:"https://10.226.77.11:8809/iserver/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
         tdtyxurl:"https://10.226.77.11:8809/iserver/services/map-tianditu/rest/maps/影像底图_经纬度",
         tdtyxzjurl:"https://10.226.77.11:8809/iserver/services/map-tianditu/rest/maps/影像中文注记_经纬度",
         heliuduanmianurl:"https://10.226.77.11/iserver/services/map-gexinghua/rest/maps/hldm_hldm",
         hekuurl: "https://10.226.77.11/iserver/services/map-gexinghua/rest/maps/hk_hk",
        //  liankongurl: 'https://10.226.77.11/iserver/services/map-shp-liankong/rest/maps/liankong',
         liankongurl: 'https://10.226.77.11/iserver/services/map-daqiliankong/rest/maps/奎独乌联防联控区',
         liankongurl2: 'https://10.226.77.11/iserver/services/map-daqiliankong/rest/maps/乌昌石联防联控区',
         jianceurl: "https://10.226.77.11/iserver/services/map-gexinghua/rest/maps/监测站点",
      //政务网服务地址59
        // url: "https://59.223.239.59:8807/iserver/services/map-shp-sxydshp/rest/maps/sxydshp",
        // dataurl: "https://59.223.239.59:8807/iserver/services/data-shp-sxydshp/rest/data",
        // tdtslurl:"https://59.223.239.59:443/super/services/map-tianditu/rest/maps/矢量底图_经纬度",
        // tdtbqurl:"https://59.223.239.59:443/super/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
        // tdtyxurl:"https://59.223.239.59:443/super/services/map-tianditu/rest/maps/影像底图_经纬度",
        // tdtyxzjurl:"https://59.223.239.59:443/super/services/map-tianditu/rest/maps/影像中文注记_经纬度",
        // heliuduanmianurl:"https://59.223.239.59:8807/iserver/services/map-gexinghua/rest/maps/hldm_hldm",
        // hekuurl: "https://59.223.239.59:8807/iserver/services/map-gexinghua/rest/maps/hk_hk",
        // liankongurl: 'https://59.223.239.59:8807/iserver/services/map-daqiliankong/rest/maps/奎独乌联防联控区',
        // liankongurl2: 'https://59.223.239.59:8807/iserver/services/map-daqiliankong/rest/maps/乌昌石联防联控区',
        // jianceurl: "https://59.223.239.59:8807/iserver/services/map-gexinghua/rest/maps/监测站点",
        //222
        // url: "https://10.222.77.11:8807/iserver/services/map-shp-sxydshp/rest/maps/sxydshp",
        // dataurl: "https://10.222.77.11:8807/iserver/services/data-shp-sxydshp/rest/data",
        // tdtslurl:"https://10.222.77.11:443/super/services/map-tianditu/rest/maps/矢量底图_经纬度",
        // tdtbqurl:"https://10.222.77.11:443/super/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
        // tdtyxurl:"https://10.222.77.11:443/super/services/map-tianditu/rest/maps/影像底图_经纬度",
        // tdtyxzjurl:"https://10.222.77.11:443/super/services/map-tianditu/rest/maps/影像中文注记_经纬度",
        // heliuduanmianurl:"https://10.222.77.11:8807/iserver/services/map-gexinghua/rest/maps/hldm_hldm",
        // hekuurl: "https://10.222.77.11:8807/iserver/services/map-gexinghua/rest/maps/hk_hk",
        // liankongurl: 'https://10.222.77.11:8807/iserver/services/map-daqiliankong/rest/maps/奎独乌联防联控区',
        // liankongurl2: 'https://10.222.77.11:8807/iserver/services/map-daqiliankong/rest/maps/乌昌石联防联控区',
        // jianceurl: "https://10.222.77.11:8807/iserver/services/map-gexinghua/rest/maps/监测站点",
      //本地服务地址
      // url: "http://localhost:8090/iserver/services/map-shp-sxydshp/rest/maps/sxydshp",
      // dataurl: "http://localhost:8090/iserver/services/data-shp-sxydshp/rest/data",
      // tdtslurl: "http://localhost:8090/iserver/services/map-tianditu/rest/maps/矢量底图_经纬度",
      // tdtbqurl: "http://localhost:8090/iserver/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
      // tdtyxurl: "http://localhost:8090/iserver/services/map-tianditu/rest/maps/影像底图_经纬度",
      // tdtyxzjurl: "http://localhost:8090/iserver/services/map-tianditu/rest/maps/影像中文注记_经纬度",
      // heliuduanmianurl: "http://localhost:8090/iserver/services/map-gexinghua/rest/maps/hldm_hldm",
      // hekuurl: "http://localhost:8090/iserver/services/map-gexinghua/rest/maps/hk_hk",
      // liankongurl: 'http://localhost:8090/iserver/services/map-shapefile-liankong/rest/maps/liankong',
      // jianceurl: "http://localhost:8090/iserver/services/map-gexinghua/rest/maps/监测站点",
      ziLayers: [],
      shiValue: '',
      chaXunBm: '',
      tuliData: [],
      jishu: 0,
      quHua: [{
        value: 'd0',
        label: '全兵团'
      }, {
        value: 'd1',
        label: '第一师'
      }, {
        value: 'd2',
        label: '第二师'
      }, {
        value: 'd3',
        label: '第三师'
      }, {
        value: 'd4',
        label: '第四师'
      }, {
        value: 'd5',
        label: '第五师'
      }, {
        value: 'd6',
        label: '第六师'
      }, {
        value: 'd7',
        label: '第七师'
      }, {
        value: 'd8',
        label: '第八师'
      }, {
        value: 'd9',
        label: '第九师'
      }, {
        value: 'd10',
        label: '第十师'
      }, {
        value: 'd11',
        label: '第十一师'
      }, {
        value: 'd12',
        label: '第十二师'
      }, {
        value: 'd13',
        label: '第十三师'
      }, {
        value: 'd14',
        label: '第十四师'
      }],
      liangsuan: '1',
      lsData: [{
        value: '1',
        label: '空间量算'
      }, {
        value: '2',
        label: '贴地量算'
      }, {
        value: '3',
        label: 'CGCS2000(国情)'
      }, {
        value: '4',
        label: 'Xi-An1980(国情)'
      }, {
        value: '5',
        label: '平面投影(三调)'
      },],
      lname: '',
      gkdy: [],
      popxy1: false,
      popxy: false,
      popxy2: false,
      popxyhldm: false,
      popxyhk: false,
      popxyjc: false,
      popdata: {
        ysxl: '要素细类',
        fqbm: '分区编码',
        smc: '省名称',
        djmc: '地市名称',
        xmc: '县名称',
        hjys: '环境要素管控分区名称',
        length: '0',
        area: '0',
        HJYS: ''
      },
      pop1data: {
        fqbm: '单元编码',
        smc: '省名称',
        djmc: '地市名称',
        xmc: '县名称',
        hjys: '环境管控单元名称',
        length: '0',
        area: '0',
        remakes: '备注',
        HJYS: ''
      },
      popdata2: {
        ysxl: '要素细类',
        fqbm: '分区编码',
        smc: '省名称',
        djmc: '地市名称',
        xmc: '县名称',
        hjys: '环境要素管控分区名称',
        length: '0',
        area: '0',
        LYMC: '流域名称',
        HDMC: '河段名称',
        KZDMQDJD: '控制断面起点经度',
        KZDMQDWD: '',
        KZDMZDJD: '',
        KZDMZDWD: '',
        HJYS: '',
      },
      pop1data3d: {
        fqbm: '单元编码',
        smc: '省名称',
        djmc: '地市名称',
        xmc: '县名称',
        hjys: '环境管控单元名称',
        length: '0',
        area: '0',
        remakes: '备注'
      },
      pophldmdata: {
        ss: '',
        szhlkh: '',
        dmmc: '',
        gjkhmb: ""
      },
      pophkdata: {
        ss: '',
        dwmc: '',
        szst: '',
        gjkhmb: ""
      },
      jiancedata: {
        地区: '',
        站点名称: '',
        SO2年均浓度: '',
        占标率: "",
        NO2年均浓度: '',
        占标率_1: '',
        PM10年均浓度: '',
        占标率_2: "",
        PM25年均浓度: '',
        占标率_3: "",
        CO日平均第95百分位数: '',
        占标率_4: "",
        O3日8小时最大平均第90百分位数: '',
        占标率_5: "",
        环境空气质量判定: ''
      },
      yingx: '影像',
      hotname: '单元热力图',
      sw3d: '三维展示',
      infoZk: false,
      info: {
        name: '信息查询总览',
        name1: '环境管控单元名称',
        yxList1: [],
        zdList1: [],
        ybList1: [],
      },
      fullscreenLoading: false,
      loading: true,
      tlshow: false,
      tlshow3D: false,
      tlbtnshow: true,
      tlbtnshow3D: false,
      ActiveName: '生态保护红线',
      hxActiveName: '生态保护红线',
      dxActiveName: '水环境优先保护区',
      sxActiveName: '自然资源重点保护区',
      dyActiveName: '优先保护单元',
      allDa: [],
      stbhhxData: [],
      ybstkjData: [],
      qitaData: [],
      shjyxData: [],
      shjzdData: [],
      shjybData: [],
      dqhjyxData: [],
      dqhjzdData: [],
      dqhjybData: [],
      trhjyxData: [],
      trhjzdData: [],
      trhjybData: [],
      zrzyzdData: [],
      zrzyybData: [],
      sxqtData: [],
      yxbhData: [],
      zdgkData: [],
      ybgkData: [],
      stbhhxData1: [],
      ybstkjData1: [],
      qitaData1: [],
      shjyxData1: [],
      shjzdData1: [],
      shjybData1: [],
      dqhjyxData1: [],
      dqhjzdData1: [],
      dqhjybData1: [],
      trhjyxData1: [],
      trhjzdData1: [],
      trhjybData1: [],
      zrzyzdData1: [],
      zrzyybData1: [],
      sxqtData1: [],
      yxbhData1: [],
      zdgkData1: [],
      ybgkData1: [],
      tInfo: {
        pageNumber: 1,
        pageSize: 10,
        tabname: '',
        yiji: ''
      },
      total: {
        hxtotal: 0,
        ybsttotal: 0,
        qttotal: 0,
        shjyxtotal: 0,
        shjzdtotal: 0,
        shjybtotal: 0,
        dqyxtotal: 0,
        dqzdtotal: 0,
        dqybtotal: 0,
        tryxtotal: 0,
        trzdtotal: 0,
        trybtotal: 0,
        zrzdtotal: 0,
        zrybtotal: 0,
        dyyxtotal: 0,
        dyzdtotal: 0,
        dyybtotal: 0,
      },
      gKShow: false,
      danYuanTed: '',
      kongJianYueS: '',
      wuRanGuanK: '',
      huanJingFangk: '',
      ziYuanLiY: '',
      infoZkTo: false,
      cxdata1: [],
      layerData: [],
      chaxunData: [],
      queryInfo: {
        pageNumber: 1,
        pageSize: 10,
        catalogIdList: []
      },
      totalCount: 0,
      jdd: '',
      jdf: '',
      jdm: '',
      wdd: '',
      wdf: '',
      wdm: '',
      jdu: null,
      jfen: null,
      jmiao: null,
      wdu: null,
      wfen: null,
      wmiao: null,
    }
  },
  async created() {
    //  const {data:result}= await this.$http2.get('/services/map-shp-sxydshpZuiZhong/rest/maps/sxydshp最终/layers/sxydshp最终.rjson')
    const { data: result } = await this.$http2.get('/services/map-shp-sxydshp/rest/maps/sxydshp/layers/sxydshp.rjson')
    for (let x in result.subLayers.layers) {
      if (x % 2 != 0) {
        this.layerData.push({ name: result.subLayers.layers[x].name })
      }
    }
  },
  mounted() {
    if (window.sessionStorage.getItem('shi') == '65') {
      this.addmap1()
    } else {
      this.addmap()
    }
    eventBus.$on('fname', (message) => {
      console.log(message)
      this.gkdy = [];
      this.cxdata1 = [];
      const meslength = message.length;
      for (let j = meslength - 1; j >= 0; j--) {
        if (message[j] == "优先") {
          message.splice(j, 1);
          this.gkdy.push("优先")
        } else if (message[j] == "重点") {
          message.splice(j, 1);
          this.gkdy.push("重点")
        } else if (message[j] == "一般") {
          message.splice(j, 1);
          this.gkdy.push("一般")
        }
      }
      this.lname = message;
      this.tuliData = message.concat(this.gkdy);
      if (this.sw3d == '回到地图') {
        for (let ix = viewer.imageryLayers.length - 1; ix >= 3; ix--) {
          viewer.imageryLayers.remove(viewer.imageryLayers.get(ix))
        }
        if (window.sessionStorage.getItem('shi') == '65') {
          for (let s = 0; s < this.lname.length; s++) {
            viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
              // url: 'http://localhost:8090/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
               url: 'https://10.226.77.11/iserver/services/map-shp-' + this.lname[s].substring(0, this.lname[s].length - 2) + 'BingTuan/rest/maps/' + this.lname[s]
              //  url: 'http://59.223.239.59:8807/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
               //   url: 'https://10.222.77.11:8807/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
            }));
          }
        } else {
          viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            //     url: 'http://localhost:8090/iserver/services/map-shp-sanwei/rest/maps/sanwei'
           url: 'https://10.226.77.11/iserver/services/map-shp-sanwei/rest/maps/sanwei'
             //  url: 'http://59.223.239.59:8807/iserver/services/map-shp-sanwei/rest/maps/sanwei'
         //     url: 'https://10.222.77.11:8807/iserver/services/map-shp-sanwei/rest/maps/sanwei'
          }));
        }

      } else {
        for (let ind in this.lname) {
          this.cxdata1.push(this.lname[ind] + ":" + this.lname[ind])
          if(this.lname[ind]=='EcoRedline兵团'){
            this.cxdata1.push(this.lname[ind] + ":" + this.lname[ind])
          }
        }
        if (window.sessionStorage.getItem('shi') == '65') {
          this.setLayerStatus();
          //this.cxLayerBingTuan()
        } else {
          this.cxLayer();
        }
      }
    });
    eventBus.$on('muluID', (muluID) => {
      if (this.sw3d == '回到地图') {

      } else {
        if (muluID.indexOf(9990) != -1) {
          daqilianfangLayer.setVisible(true)
        }
        if (muluID.indexOf(9990) == -1) {
          daqilianfangLayer.setVisible(false)
        }
        if (muluID.indexOf(99901) != -1) {
          daqilianfangLayer2.setVisible(true)
        }
        if (muluID.indexOf(99901) == -1) {
          daqilianfangLayer2.setVisible(false)
        }
        if (muluID.indexOf(9991) != -1) {
          hldmLayer.setVisible(true)
        }
        if (muluID.indexOf(9991) == -1) {
          hldmLayer.setVisible(false)
        }
        if (muluID.indexOf(9992) != -1) {
          hkLayer.setVisible(true)
        }
        if (muluID.indexOf(9992) == -1) {
          hkLayer.setVisible(false)
        }
        if (muluID.indexOf(9993) != -1) {
          jianceLayer.setVisible(true)
        }
        if (muluID.indexOf(9993) == -1) {
          jianceLayer.setVisible(false)
        }
        this.queryInfo.catalogIdList = muluID;
        this.cxLayerBingTuan()
      }
    });
    eventBus.$on('yijimulu', (yiji) => {
      this.tInfo.yiji = yiji;
      if (this.tInfo.yiji == "1") {
        this.ActiveName = 'hx'
      } else if (this.tInfo.yiji == "2") {
        this.ActiveName = 'dx'
      } else if (this.tInfo.yiji == "3") {
        this.ActiveName = 'sx'
      } else if (this.tInfo.yiji == "4") {
        this.ActiveName = 'dy'
      } else if (this.tInfo.yiji == "") {
      }
    })
    eventBus.$on('erjimulu', (erji) => {
      if (this.tInfo.yiji == "1") {
        this.hxActiveName = erji
      } else if (this.tInfo.yiji == "2") {
        this.dxActiveName = erji
      } else if (this.tInfo.yiji == "3") {
        this.sxActiveName = erji
      } else if (this.tInfo.yiji == "4") {
        this.dyActiveName = erji
      }
      this.tInfo.tabname = erji;
    })
    document.getElementsByClassName('ol-zoom-in')[0].title = '放大';
    document.getElementsByClassName('ol-zoom-out')[0].title = '缩小';
    document.getElementsByClassName('ol-full-screen-false')[0].title = '全屏';
  },
  methods: {
    async addmap() {
      map = new Map({
        target: 'map',
        controls: control.defaults({
          attribution: false
        }),
        view: new View({
          center: [85.28838135, 42.209817352],
          zoom: 6,
          maxZoom: 21,
          projection: 'EPSG:4326'
        }),
      });
      var fullScreenControl = new control.FullScreen();
      map.addControl(fullScreenControl);
      tdtslLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtslurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      tdtbqLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtbqurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      // tdtslLayer = new TileLayer({
      //   opacity: 1,
      //   source: new WMTS({
      //     url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
      //     layer: 'vec',
      //     matrixSet: 'c',
      //     format: 'tiles',
      //     style: 'default',
      //     projection: projection,
      //     tileGrid: new WMTSTileGrid({
      //       origin: olExtent.getTopLeft(projectionExtent),
      //       resolutions: resolutions,
      //       matrixIds: matrixIds
      //     }),
      //     wrapX: false
      //   })
      // });
      // tdtbqLayer = new TileLayer({
      //   opacity: 1,
      //   source: new WMTS({
      //     url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=" + webKey,
      //     layer: 'cva',
      //     matrixSet: 'c',
      //     format: 'tiles',
      //     style: 'default',
      //     projection: projection,
      //     tileGrid: new WMTSTileGrid({
      //       origin: olExtent.getTopLeft(projectionExtent),
      //       extent: [-180.0, -90.0, 180.0, 90.0],
      //       resolutions: resolutions,
      //       matrixIds: matrixIds
      //     }),
      //     wrapX: false
      //   })
      // });
      //   tdtyxLayer =  new TileLayer({
      //    opacity: 1,
      //    source: new WMTS({
      //      url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
      //      layer: 'vec',
      //      matrixSet: 'c',
      //      format: 'tiles',
      //      style: 'default',
      //      projection: projection,
      //      tileGrid: new WMTSTileGrid({
      //        origin: olExtent.getTopLeft(projectionExtent),
      //        resolutions: resolutions,
      //        matrixIds: matrixIds
      //      }),
      //      wrapX: false
      //    })
      //  });
      //   tdtyxzjLayer =  new TileLayer({
      //       opacity: 1,
      //       source: new WMTS({
      //         url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
      //         layer: 'vec',
      //         matrixSet: 'c',
      //         format: 'tiles',
      //         style: 'default',
      //         projection: projection,
      //         tileGrid: new WMTSTileGrid({
      //           origin: olExtent.getTopLeft(projectionExtent),
      //           resolutions: resolutions,
      //           matrixIds: matrixIds
      //         }),
      //         wrapX: false
      //       })
      //     });
      /*  var shplayer = new TileLayer({
          source: new TileSuperMapRest({
            url: this.url,
            wrapX: false
          }),
          projection: 'EPSG:4326'
        });*/
      tdtyxLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtyxurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      tdtyxzjLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtyxzjurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      tdtyxLayer.setVisible(false);
      tdtyxzjLayer.setVisible(false);
      map.addLayer(tdtslLayer);
      map.addLayer(tdtyxLayer);
      map.addLayer(tdtbqLayer);
      map.addLayer(tdtyxzjLayer);
      var converLayer = new VectorLayer({
        source: new VectorSource(),
        style: mystyle
      });
      map.addLayer(converLayer)
      //   const {data:result_xj}= await this.$http.get('http://localhost:8081/xj.json')
      const { data: result_xj } = await this.$http1.get('./xj.json')
      // const {data:result_xj}= await this.$http.get('http://10.16.11.240:15487/xj.json')
      var fts = new GeoJSON().readFeatures(result_xj);
      var ft = fts[0];
      var converGeom = this.erase(ft.getGeometry());
      var convertFt = new Feature({
        geometry: converGeom
      })
      converLayer.getSource().addFeature(convertFt);
      //this.map.addLayer(shplayer);
      hxSource = new VectorSource({
        wrapX: false
      });
      dxSource = new VectorSource({
        wrapX: false
      });
      sxSource = new VectorSource({
        wrapX: false
      });
      yxSource = new VectorSource({
        wrapX: false
      });
      zdSource = new VectorSource({
        wrapX: false
      });
      ybSource = new VectorSource({
        wrapX: false
      });
      hxLayer = new VectorLayer({
        source: hxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(255, 0 ,0)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(255, 0 ,0, 0.3)'
          })
        })
      });
      dxLayer = new VectorLayer({
        source: dxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(28, 220 ,48)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(28, 220 ,128, 0.3)'
          })
        })
      });
      sxLayer = new VectorLayer({
        source: sxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(228, 110 ,28)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(228, 110 ,28, 0.3)'
          })
        })
      });
      yxLayer = new VectorLayer({
        source: yxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(255, 120 ,120)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(255, 120 ,120, 0.7)'
          })
        })
      });
      zdLayer = new VectorLayer({
        source: zdSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(255, 255 ,0)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(255, 255 ,0, 0.7)'
          })
        })
      });
      ybLayer = new VectorLayer({
        source: ybSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(0, 165 ,80)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 165 ,80, 0.7)'
          })
        })
      });
      selectSouce = new VectorSource({
        wrapX: false
      });
      selectLayer = new VectorLayer({
        source: selectSouce,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: '#66B1FF',
            width: 5
          }),
        })
      });
      var chinaSource = new VectorSource({
        url: '../assets/china.json',
        format: new GeoJSON(),
        wrapX: false
      });
      xjSource = new VectorSource({
        url: './xj.json',
        format: new GeoJSON(),
        wrapX: false
      });
      xjLayer = new VectorLayer({
        source: xjSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(128, 0 ,128)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(128, 0 ,128, 0.01)'
          })
        })
      });

      map.addLayer(xjLayer);
      map.addLayer(vector);
      map.addLayer(vector1);
      map.addLayer(hxLayer);
      map.addLayer(dxLayer);
      map.addLayer(sxLayer);
      map.addLayer(yxLayer);
      map.addLayer(zdLayer);
      map.addLayer(ybLayer);
      map.addLayer(selectLayer);
      var shiSource = new VectorSource({
        wrapX: false
      });
      shiLayer = new VectorLayer({
        source: shiSource,
      });

      //   const {data:result}= await this.$http.get('http://localhost:8081/shi.json')
      //  const {data:result}= await this.$http.get('http://10.16.11.240:15487/shi.json')
      const { data: result } = await this.$http1.get('./shi.json')
      for (let i = 0; i < result.length; i++) {
        var shifea1 = new Feature({
          geometry: new Point([result[i].经度, result[i].纬度]),
          name: result[i].标准名
        });
        shifea1.setStyle(createShiStyle(shifea1));
        shiSource.addFeature(shifea1);
      }

      var tuanSource = new VectorSource({
        wrapX: false
      });
      var tuanLayer = new VectorLayer({
        source: tuanSource,
      });
      //    const {data:result2}= await this.$http.get('http://localhost:8081/tuan.json')
      //  const {data:result2}= await this.$http.get('http://10.16.11.240:15487/tuan.json')
      const { data: result2 } = await this.$http1.get('./tuan.json')
      for (let i = 0; i < result2.length; i++) {
        var tuanfea1 = new Feature({
          geometry: new Point([result2[i].经度, result2[i].纬度]),
          name: result2[i].标准名
        });
        tuanfea1.setStyle(createTuanStyle(tuanfea1));
        tuanSource.addFeature(tuanfea1);
      }
      tuanLayer.setVisible(false)
      map.addLayer(shiLayer);
      map.addLayer(tuanLayer);
      map.addLayer(pLayer);
      map.getView().on('change:resolution', function () {
        console.log(map.getView().getZoom())
        if (map.getView().getZoom() < 9) {
          tuanLayer.setVisible(false);
        }
        if (map.getView().getZoom() >= 9) {
          tuanLayer.setVisible(true);
        }
      });
      map.on('pointermove', (evt) => {
        this.jdd = this.jwdzshjz(evt.coordinate[0].toFixed(8))
        this.wdd = this.jwdzshjz(evt.coordinate[1].toFixed(8))
      })
      popO = new Overlay({
        element: document.getElementById('popup1'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      pop1 = new Overlay({
        element: document.getElementById('popup2'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      pop2 = new Overlay({
        element: document.getElementById('popup3'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      map.on('click', evt => {
        var zt = 0;
        var coordinate = evt.coordinate;
        //var dpoint=new geoPoint(evt.coordinate);
        console.log(evt)
        map.forEachFeatureAtPixel(evt.pixel, (cxfeature, layerVetor) => {
          console.log(333333333)
          zt++;
          if (zt != 1) {
            return;
          }
          selectSouce.clear();
          selectSouce.addFeature(new Feature(cxfeature.geometryChangeKey_.target))
          if (layerVetor == hxLayer) {
            this.popdata.HJYS = cxfeature.values_.HJYS;
            this.popdata.ysxl = cxfeature.values_.YSXL;
            this.popdata.fqbm = cxfeature.values_.HJYSGKFQBM;
            this.popdata.smc = cxfeature.values_.PROV;
            this.popdata.djmc = cxfeature.values_.CITY;
            this.popdata.xmc = cxfeature.values_.COUNTY;
            this.popdata.hjys = cxfeature.values_.HJYSGKFQMC;
            this.popdata.length = cxfeature.values_.Shape_Leng * 100 + '千米';
            this.popdata.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
            this.popxy = true;
            this.popxy1 = false;
            this.popxy2 = false;
            map.addOverlay(popO);
            popO.setPosition(coordinate);
            map.getView().setCenter(coordinate);
            // this.fenxi(cxfeature.getGeometry())
          } else if (layerVetor == dxLayer) {
            if (cxfeature.values_.HJYS == '2') {
              this.popdata2.HJYS = cxfeature.values_.HJYS;
              this.popdata2.ysxl = cxfeature.values_.YSXL;
              this.popdata2.fqbm = cxfeature.values_.HJYSGKFQBM;
              this.popdata2.smc = cxfeature.values_.PROV;
              this.popdata2.djmc = cxfeature.values_.CITY;
              this.popdata2.xmc = cxfeature.values_.COUNTY;
              this.popdata2.hjys = cxfeature.values_.HJYSGKFQMC;
              this.popdata2.length = cxfeature.values_.Shape_Leng * 100 + '千米';
              this.popdata2.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
              this.popdata2.LYMC = cxfeature.values_.LYMC;
              this.popdata2.HDMC = cxfeature.values_.HDMC;
              this.popdata2.KZDMQDJD = cxfeature.values_.KZDMQDJD;
              this.popdata2.KZDMQDWD = cxfeature.values_.KZDMQDWD;
              this.popdata2.KZDMZDJD = cxfeature.values_.KZDMZDJD;
              this.popdata2.KZDMZDWD = cxfeature.values_.KZDMZDWD;
              this.popxy = false;
              this.popxy1 = false;
              this.popxy2 = true;
              map.addOverlay(pop2);
              pop2.setPosition(coordinate);
            } else {
              this.popdata.HJYS = cxfeature.values_.HJYS;
              this.popdata.ysxl = cxfeature.values_.YSXL;
              this.popdata.fqbm = cxfeature.values_.HJYSGKFQBM;
              this.popdata.smc = cxfeature.values_.PROV;
              this.popdata.djmc = cxfeature.values_.CITY;
              this.popdata.xmc = cxfeature.values_.COUNTY;
              this.popdata.hjys = cxfeature.values_.HJYSGKFQMC;
              this.popdata.length = cxfeature.values_.Shape_Leng * 100 + '千米';
              this.popdata.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
              this.popxy = true;
              this.popxy1 = false;
              this.popxy2 = false;
              map.addOverlay(popO);
              popO.setPosition(coordinate);
            }
            map.getView().setCenter(coordinate);
            //this.fenxi(cxfeature.getGeometry())
          } else if (layerVetor == sxLayer) {
            this.popdata.HJYS = cxfeature.values_.HJYS;
            this.popdata.ysxl = cxfeature.values_.YSXL;
            this.popdata.fqbm = cxfeature.values_.HJYSGKFQBM;
            this.popdata.smc = cxfeature.values_.PROV;
            this.popdata.djmc = cxfeature.values_.CITY;
            this.popdata.xmc = cxfeature.values_.COUNTY;
            this.popdata.hjys = cxfeature.values_.HJYSGKFQMC;
            this.popdata.length = cxfeature.values_.Shape_Leng * 100 + '千米';
            this.popdata.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
            this.popxy = true;
            this.popxy1 = false;
            this.popxy2 = false;
            map.addOverlay(popO);
            popO.setPosition(coordinate);
            map.getView().setCenter(coordinate);
            // this.fenxi(cxfeature.getGeometry())
          } else if (layerVetor == yxLayer) {
            this.pop1data.HJYS = cxfeature.values_.HJYS;
            this.pop1data.fqbm = cxfeature.values_.HJGKDYBM;
            this.pop1data.smc = cxfeature.values_.PROV;
            this.pop1data.djmc = cxfeature.values_.CITY;
            this.pop1data.xmc = cxfeature.values_.COUNTY;
            this.pop1data.hjys = cxfeature.values_.HJGKDYMC;
            this.pop1data.length = cxfeature.values_.Shape_Leng * 100 + '千米';
            this.pop1data.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
            this.pop1data.remakes = cxfeature.values_.REMARKS;
            this.popxy = false;
            this.popxy1 = true;
            this.popxy2 = false;
            map.addOverlay(pop1);
            pop1.setPosition(coordinate);
            map.getView().setCenter(coordinate);
            //this.fenxi(cxfeature.getGeometry())
          } else if (layerVetor == zdLayer) {
            this.pop1data.HJYS = cxfeature.values_.HJYS;
            this.pop1data.fqbm = cxfeature.values_.HJGKDYBM;
            this.pop1data.smc = cxfeature.values_.PROV;
            this.pop1data.djmc = cxfeature.values_.CITY;
            this.pop1data.xmc = cxfeature.values_.COUNTY;
            this.pop1data.hjys = cxfeature.values_.HJGKDYMC;
            this.pop1data.length = cxfeature.values_.Shape_Leng * 100 + '千米';
            this.pop1data.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
            this.pop1data.remakes = cxfeature.values_.REMARKS;
            this.popxy = false;
            this.popxy1 = true;
            this.popxy2 = false;
            map.addOverlay(pop1);
            pop1.setPosition(coordinate);
            map.getView().setCenter(coordinate);
            //this.fenxi(cxfeature.getGeometry())
          } else if (layerVetor == ybLayer) {
            this.pop1data.HJYS = cxfeature.values_.HJYS;
            this.pop1data.fqbm = cxfeature.values_.HJGKDYBM;
            this.pop1data.smc = cxfeature.values_.PROV;
            this.pop1data.djmc = cxfeature.values_.CITY;
            this.pop1data.xmc = cxfeature.values_.COUNTY;
            this.pop1data.hjys = cxfeature.values_.HJGKDYMC;
            this.pop1data.length = cxfeature.values_.Shape_Leng * 100 + '千米';
            this.pop1data.area = (cxfeature.values_.Shape_Area * 10000).toFixed(2) + '平方公里';
            this.pop1data.remakes = cxfeature.values_.REMARKS;
            this.popxy = false;
            this.popxy1 = true;
            this.popxy2 = false;
            map.addOverlay(pop1);
            pop1.setPosition(coordinate);
            map.getView().setCenter(coordinate);
            //this.fenxi(cxfeature.getGeometry())
          }

        })
      })
    },
    async addmap1() {
      this.layerService();
      map = new Map({
        target: 'map',
        controls: control.defaults({
          attribution: false
        }),
        view: new View({
          center: [85.28838135, 42.209817352],
          zoom: 6,
          projection: 'EPSG:4326'
        }),
      });
      var fullScreenControl = new control.FullScreen();
      map.addControl(fullScreenControl);
      tdtslLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtslurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      tdtbqLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtbqurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      tdtyxLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtyxurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      
      tdtyxzjLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtyxzjurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      
              // tdtslLayer = new TileLayer({
              //   opacity: 1,
              //   source: new WMTS({
              //     url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
              //     layer: 'vec',
              //     matrixSet: 'c',
              //     format: 'tiles',
              //     style: 'default',
              //     projection: projection,
              //     tileGrid: new WMTSTileGrid({
              //       origin: olExtent.getTopLeft(projectionExtent),
              //       resolutions: resolutions,
              //       matrixIds: matrixIds
              //     }),
              //     wrapX: false
              //   })
              // });
              // tdtbqLayer = new TileLayer({
              //   opacity: 1,
              //   source: new WMTS({
              //     url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=" + webKey,
              //     layer: 'cva',
              //     matrixSet: 'c',
              //     format: 'tiles',
              //     style: 'default',
              //     projection: projection,
              //     tileGrid: new WMTSTileGrid({
              //       origin: olExtent.getTopLeft(projectionExtent),
              //       extent: [-180.0, -90.0, 180.0, 90.0],
              //       resolutions: resolutions,
              //       matrixIds: matrixIds
              //     }),
              //     wrapX: false
              //   })
              // });
              // tdtyxLayer =  new TileLayer({
              //   opacity: 1,
              //   source: new WMTS({
              //     url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
              //     layer: 'vec',
              //     matrixSet: 'c',
              //     format: 'tiles',
              //     style: 'default',
              //     projection: projection,
              //     tileGrid: new WMTSTileGrid({
              //       origin: olExtent.getTopLeft(projectionExtent),
              //       resolutions: resolutions,
              //       matrixIds: matrixIds
              //     }),
              //     wrapX: false
              //   })
              // });
              // tdtyxzjLayer =  new TileLayer({
              //   opacity: 1,
              //   source: new WMTS({
              //     url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
              //     layer: 'vec',
              //     matrixSet: 'c',
              //     format: 'tiles',
              //     style: 'default',
              //     projection: projection,
              //     tileGrid: new WMTSTileGrid({
              //       origin: olExtent.getTopLeft(projectionExtent),
              //       resolutions: resolutions,
              //       matrixIds: matrixIds
              //     }),
              //     wrapX: false
              //   })
              // });
      tdtyxLayer.setVisible(false);
      tdtyxzjLayer.setVisible(false);
      map.addLayer(tdtslLayer);
      map.addLayer(tdtyxLayer);
      map.addLayer(tdtbqLayer);
      map.addLayer(tdtyxzjLayer);
      daqilianfangLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.liankongurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      daqilianfangLayer2 = new TileLayer({
        source: new TileSuperMapRest({
          url: this.liankongurl2,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      hldmLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.heliuduanmianurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      hkLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.hekuurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      jianceLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.jianceurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      hldmLayer.setVisible(false)
      hkLayer.setVisible(false)
      jianceLayer.setVisible(false)
      daqilianfangLayer.setVisible(false)
      map.addLayer(daqilianfangLayer);
      daqilianfangLayer2.setVisible(false)
      map.addLayer(daqilianfangLayer2);
      map.addLayer(hldmLayer);
      map.addLayer(hkLayer);
      map.addLayer(jianceLayer);
      var converLayer = new VectorLayer({
        source: new VectorSource(),
        style: mystyle
      });
      map.addLayer(converLayer)
      //     const {data:result_xj}= await this.$http.get('http://localhost:8081/xj.json')
      //  const {data:result_xj}= await this.$http.get('http://10.16.11.240:15487/xj.json')
      const { data: result_xj } = await this.$http1.get('./xj.json')
      var fts = new GeoJSON().readFeatures(result_xj);
      var ft = fts[0];
      var converGeom = this.erase(ft.getGeometry());
      var convertFt = new Feature({
        geometry: converGeom
      })
      converLayer.getSource().addFeature(convertFt);
      xjSource = new VectorSource({
        //      url: 'http://localhost:8081/xj.json',
        //  url: 'http://10.16.11.240:15487/xj.json',
        url: './xj.json',
        format: new GeoJSON(),
        wrapX: false
      });
      xjLayer = new VectorLayer({
        source: xjSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(128, 0 ,128)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(128, 0 ,128, 0.01)'
          })
        })
      });
      var shiSource = new VectorSource({
        wrapX: false
      });
      shiLayer = new VectorLayer({
        source: shiSource,
      });
      //     const {data:result}= await this.$http.get('http://localhost:8081/shi.json')
      //  const {data:result}= await this.$http.get('http://10.16.11.240:15487/shi.json')
      const { data: result } = await this.$http1.get('./shi.json')
      for (let i = 0; i < result.length; i++) {
        var shifea1 = new Feature({
          geometry: new Point([result[i].经度, result[i].纬度]),
          name: result[i].标准名
        });
        shifea1.setStyle(createShiStyle(shifea1));
        shiSource.addFeature(shifea1);
      }
      var tuanSource = new VectorSource({
        wrapX: false
      });
      tuanLayer = new VectorLayer({
        source: tuanSource,
      });
      //  const {data:result2}= await this.$http.get('http://localhost:8081/tuan.json')
      //    const {data:result2}= await this.$http.get('http://10.16.11.240:15487/tuan.json')
      const { data: result2 } = await this.$http1.get('./tuan.json')
      for (let i = 0; i < result2.length; i++) {
        var tuanfea1 = new Feature({
          geometry: new Point([result2[i].经度, result2[i].纬度]),
          name: result2[i].标准名
        });
        tuanfea1.setStyle(createTuanStyle(tuanfea1));
        tuanSource.addFeature(tuanfea1);
      }
      tuanLayer.setVisible(false)
      map.addLayer(xjLayer);
      map.addLayer(vector);
      map.addLayer(vector1);
      map.getView().on('change:resolution', function () {
        console.log(map.getView().getZoom())
        if (map.getView().getZoom() < 9) {
          tuanLayer.setVisible(false);
        }
        if (map.getView().getZoom() >= 9) {
          tuanLayer.setVisible(true);
        }
      });
      map.on('pointermove', (evt) => {
        this.jdd = this.jwdzshjz(evt.coordinate[0].toFixed(8))
        this.wdd = this.jwdzshjz(evt.coordinate[1].toFixed(8))
      })
      hxSource = new VectorSource({
        wrapX: false
      });
      dxSource = new VectorSource({
        wrapX: false
      });
      sxSource = new VectorSource({
        wrapX: false
      });
      yxSource = new VectorSource({
        wrapX: false
      });
      zdSource = new VectorSource({
        wrapX: false
      });
      ybSource = new VectorSource({
        wrapX: false
      });
      hxLayer = new VectorLayer({
        source: hxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(255, 0 ,0)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(255, 0 ,0, 0.3)'
          })
        })
      });
      dxLayer = new VectorLayer({
        source: dxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(28, 220 ,48)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(28, 220 ,128, 0.3)'
          })
        })
      });
      sxLayer = new VectorLayer({
        source: sxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(228, 110 ,28)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(228, 110 ,28, 0.3)'
          })
        })
      });
      yxLayer = new VectorLayer({
        source: yxSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(255, 120 ,120)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(255, 120 ,120, 0.7)'
          })
        })
      });
      zdLayer = new VectorLayer({
        source: zdSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(255, 255 ,0)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(255, 255 ,0, 0.7)'
          })
        })
      });
      ybLayer = new VectorLayer({
        source: ybSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(0, 165 ,80)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 165 ,80, 0.7)'
          })
        })
      });
      selectSouce = new VectorSource({
        wrapX: false
      });
      selectLayer = new VectorLayer({
        source: selectSouce,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: '#66B1FF',
            width: 5
          }),
        })
      });
      map.addLayer(hxLayer);
      map.addLayer(dxLayer);
      map.addLayer(sxLayer);
      map.addLayer(yxLayer);
      map.addLayer(zdLayer);
      map.addLayer(ybLayer);
      map.addLayer(shiLayer);
      map.addLayer(tuanLayer);
      map.addLayer(selectLayer);
      map.addLayer(pLayer);
      popO = new Overlay({
        element: document.getElementById('popup1'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      pop1 = new Overlay({
        element: document.getElementById('popup2'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      pop2 = new Overlay({
        element: document.getElementById('popup3'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      pophldm = new Overlay({
        element: document.getElementById('popuphldm'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      pophk = new Overlay({
        element: document.getElementById('popuphk'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      popjc = new Overlay({
        element: document.getElementById('popupjc'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      map.on('click', evt => {
        var zt1 = 0;
        var coordinate = evt.coordinate;
        var polygon = new Point(evt.coordinate);
        if (hldmLayer.getVisible()) {
          var param = new QueryByDistanceParameters({
            queryParams: { name: "hldm_hldm@gexinghua" },
            distance: 0.1,
            geometry: polygon
          });
          new QueryService(this.heliuduanmianurl).queryByDistance(param, (serviceResult) => {
            if (serviceResult.result.totalCount == 0) {
              return;
            }
            this.pophldmdata = serviceResult.result.recordsets[0].features.features[0].properties
            this.popxyhldm = true
            map.addOverlay(pophldm);
            pophldm.setPosition(coordinate);
          });
        }
        if (hkLayer.getVisible()) {
          var param = new QueryByDistanceParameters({
            queryParams: { name: "hk_hk@gexinghua" },
            distance: 0.1,
            geometry: polygon
          });
          new QueryService(this.hekuurl).queryByDistance(param, (serviceResult) => {
            if (serviceResult.result.totalCount == 0) {
              return;
            }
            this.pophkdata = serviceResult.result.recordsets[0].features.features[0].properties
            this.popxyhk = true
            map.addOverlay(pophk);
            pophk.setPosition(coordinate);
          });
        }
        if (jianceLayer.getVisible()) {
          var param = new QueryByDistanceParameters({
            queryParams: { name: "jiance@gexinghua" },
            distance: 0.1,
            geometry: polygon
          });
          new QueryService(this.jianceurl).queryByDistance(param, (serviceResult) => {
            if (serviceResult.result.totalCount == 0) {
              return;
            }
            this.jiancedata = serviceResult.result.recordsets[0].features.features[0].properties
            this.popxyjc = true
            map.addOverlay(popjc);
            popjc.setPosition(coordinate);
          });
        }
        var geometryParam = new GetFeaturesByGeometryParameters({
          datasetNames: this.cxdata1,
          geometry: polygon,
          spatialQueryMode: "INTERSECT"
        });
        new FeatureService(this.dataurl).getFeaturesByGeometry(geometryParam, (serviceResult) => {
          selectSouce.addFeatures((new GeoJSON()).readFeatures(serviceResult.result.features))
          zt1++;
          if (zt1 != 1) {
            return;
          }
          if (serviceResult.result.features.features.length == 0) {
            return;
          }
          for (let x = 0; x < serviceResult.result.features.features.length; x++) {
            if (serviceResult.result.features.features[0].properties.HJGKDYBM) {
              this.pop1data.fqbm = serviceResult.result.features.features[0].properties.HJGKDYBM;
              this.pop1data.smc = serviceResult.result.features.features[0].properties.PROV;
              this.pop1data.djmc = serviceResult.result.features.features[0].properties.CITY;
              this.pop1data.xmc = serviceResult.result.features.features[0].properties.COUNTY;
              this.pop1data.hjys = serviceResult.result.features.features[0].properties.HJGKDYMC;
              this.pop1data.length = serviceResult.result.features.features[0].properties.Shape_Leng * 100 + '公里';
              this.pop1data.area = (serviceResult.result.features.features[0].properties.Shape_Area * 10000).toFixed(2) + '平方公里';
              this.pop1data.remakes = serviceResult.result.features.features[0].properties.REMARKS;
              this.popxy = false;
              this.popxy1 = true;
              this.popxy2 = false;
              map.addOverlay(pop1);
              pop1.setPosition(evt.coordinate);
              map.getView().setCenter(coordinate);
            } else {
              if (serviceResult.result.features.features[0].properties.HJYS == '2') {
                this.popdata2.HJYS = serviceResult.result.features.features[0].properties.HJYS;
                this.popdata2.ysxl = serviceResult.result.features.features[0].properties.YSXL;
                this.popdata2.fqbm = serviceResult.result.features.features[0].properties.HJYSGKFQBM;
                this.popdata2.smc = serviceResult.result.features.features[0].properties.PROV;
                this.popdata2.djmc = serviceResult.result.features.features[0].properties.CITY;
                this.popdata2.xmc = serviceResult.result.features.features[0].properties.COUNTY;
                this.popdata2.hjys = serviceResult.result.features.features[0].properties.HJYSGKFQMC;
                this.popdata2.length = serviceResult.result.features.features[0].properties.Shape_Leng * 100 + '公里';
                this.popdata2.area = (serviceResult.result.features.features[0].properties.Shape_Area * 10000).toFixed(2) + '平方公里';
                this.popdata2.LYMC = serviceResult.result.features.features[0].properties.LYMC;
                this.popdata2.HDMC = serviceResult.result.features.features[0].properties.HDMC;
                this.popdata2.KZDMQDJD = serviceResult.result.features.features[0].properties.KZDMQDJD;
                this.popdata2.KZDMQDWD = serviceResult.result.features.features[0].properties.KZDMQDWD;
                this.popdata2.KZDMZDJD = serviceResult.result.features.features[0].properties.KZDMZDJD;
                this.popdata2.KZDMZDWD = serviceResult.result.features.features[0].properties.KZDMZDWD;
                this.popxy = false;
                this.popxy1 = false;
                this.popxy2 = true;
                map.addOverlay(pop2);
                pop2.setPosition(coordinate);
                map.getView().setCenter(coordinate);
              } else {
                this.popdata.HJYS = serviceResult.result.features.features[0].properties.HJYS;
                this.popdata.ysxl = serviceResult.result.features.features[0].properties.YSXL;
                this.popdata.fqbm = serviceResult.result.features.features[0].properties.HJYSGKFQBM;
                this.popdata.smc = serviceResult.result.features.features[0].properties.PROV;
                this.popdata.djmc = serviceResult.result.features.features[0].properties.CITY;
                this.popdata.xmc = serviceResult.result.features.features[0].properties.COUNTY;
                this.popdata.hjys = serviceResult.result.features.features[0].properties.HJYSGKFQMC;
                this.popdata.length = serviceResult.result.features.features[0].properties.Shape_Leng * 100 + '公里';
                this.popdata.area = (serviceResult.result.features.features[0].properties.Shape_Area * 10000).toFixed(2) + '平方公里';
                this.popxy = true;
                this.popxy1 = false;
                this.popxy2 = false;
                map.addOverlay(popO);
                popO.setPosition(coordinate);
                map.getView().setCenter(coordinate);
              }
            }
          }
        });

      });

    },
    layerService() {
      new LayerInfoService(this.url).getLayersInfo((serviceResult) => {
        if (serviceResult.result) {
          {
            if (serviceResult.result.subLayers) {
              for (let j = 0; j < serviceResult.result.subLayers.layers.length; j++) {
                this.ziLayers.push(serviceResult.result.subLayers.layers[j]);
              }
              this.createTempLayer();
            }
          }
        }
      });

    },
    createTempLayer() {
      var layerStatusParameters = new SetLayerStatusParameters();
      layerStatusParameters = this.getLayerStatusList(layerStatusParameters);
      var setLayerStatusService1 = new SetLayerStatusService(this.url);
      setLayerStatusService1.events.on({ "processCompleted": this.createTempLayerCompleted });
      setLayerStatusService1.processAsync(layerStatusParameters);
    },
    getLayerStatusList(parameters) {
      for (let i = 0; i < this.ziLayers.length; i++) {
        var layerStatus = new LayerStatus();
        layerStatus.layerName = this.ziLayers[i].name;
        console.log('lname:'+this.lname)
        console.log('layerStatus.layerName:'+layerStatus.layerName)
        if (layerStatus.layerName.split('@')[1].indexOf('unique_1') !== -1 && layerStatus.layerName.indexOf('_outline') == -1) {
          if (this.gkdy.indexOf('优先') != -1) {
            layerStatus.isVisible = true;
          } else {
            layerStatus.isVisible = false;
          }
        } else if (layerStatus.layerName.split('@')[1].indexOf('unique_2') !== -1 && layerStatus.layerName.indexOf('_outline') == -1) {
          if (this.gkdy.indexOf('重点') != -1) {
            layerStatus.isVisible = true;
          } else {
            layerStatus.isVisible = false;
          }
        } else if (layerStatus.layerName.split('@')[1].indexOf('unique_3') !== -1 && layerStatus.layerName.indexOf('_outline') == -1) {
          if (this.gkdy.indexOf('一般') != -1) {
            layerStatus.isVisible = true;
          } else {
            layerStatus.isVisible = false;
          }
        }
        // else if (this.lname.indexOf(layerStatus.layerName.split('@')[0]) !== -1 && layerStatus.layerName.indexOf('_outline') == -1) {
        else if (this.lname.indexOf(layerStatus.layerName.split('@')[0]) !== -1) {
          layerStatus.isVisible = true;
        } else {
          layerStatus.isVisible = false;
        }
        parameters.layerStatusList.push(layerStatus);
      }
      //设置资源在服务端保存的时间，单位为分钟，默认为10
      parameters.holdTime = 300;
      return parameters;
    },
    createTempLayerCompleted(createTempLayerEventArgs) {
      console.log(createTempLayerEventArgs)
      tempLayerID = createTempLayerEventArgs.result.newResourceID;
      tempLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.url,
          wrapX: true,
          //transparent: false,
          cacheEnabled: false,
          redirect: true,
          layersID: tempLayerID
        }),
        projection: 'EPSG:4326'
      })
      map.addLayer(tempLayer);
    },
    setLayerStatus() {
      var layerStatusParameters = new SetLayerStatusParameters();
      layerStatusParameters = this.getLayerStatusList(layerStatusParameters);
      console.log(layerStatusParameters)
      layerStatusParameters.resourceID = tempLayerID;
      console.log(layerStatusParameters.resourceID)
      var setLayerStatusService = new SetLayerStatusService(this.url);
      setLayerStatusService.events.on({ "processCompleted": this.setLayerStatusCompleted });
      setLayerStatusService.processAsync(layerStatusParameters);
    },
    setLayerStatusCompleted(setLayerStatusEventArgs) {
      console.log(setLayerStatusEventArgs)
      console.log(tempLayerID)
      map.removeLayer(tempLayer);
      tempLayer = null;
      tempLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.url,
          wrapX: true,
          cacheEnabled: false,
          redirect: true,
          layersID: tempLayerID
        }),
        projection: 'EPSG:4326'
      });
      map.addLayer(tempLayer);
      map.removeLayer(shiLayer);
      map.removeLayer(tuanLayer)
      map.removeLayer(pLayer)
      map.addLayer(shiLayer);
      map.addLayer(tuanLayer);
      map.addLayer(pLayer)
    },
    cxLayer() {
      hxSource.clear();
      sxSource.clear();
      dxSource.clear();
      yxSource.clear();
      zdSource.clear();
      ybSource.clear();
      if (this.lname == "") {
        return
      }
      var cxdata = [];
      var dycxdata = [];
      var shiCode = [];
      //被代管的团
      var notdaiguanCode = []
      shiCode.push(window.sessionStorage.getItem('shi'));
      console.log(typeof shiCode)
      //代管
      if (shiCode[0] == '6578') {
        shiCode.push('659001')
      } else if (shiCode[0] == '6573') {
        notdaiguanCode.push('657310')
        shiCode.push('659003')
      } else if (shiCode[0] == '6576') {
        shiCode.push('659004')
        shiCode.push('657310')
      } else if (shiCode[0] == '6572') {
        notdaiguanCode.push('657216')
        shiCode.push('659006')
      } else if (shiCode[0] == '6574') {
        shiCode.push('659008')
        shiCode.push('657216')
      } else if (shiCode[0] == '6584') {
        notdaiguanCode.push('658402')
        shiCode.push('659009')
      } else if (shiCode[0] == '6577') {
        shiCode.push('657101')
        shiCode.push('657105')
      } else if (shiCode[0] == '6582') {
        shiCode.push('658402')
      } else if (shiCode[0] == '6571') {
        notdaiguanCode.push('657101')
        notdaiguanCode.push('657105')
      }
      var ceshi;
      for (let ind in this.lname) {
        if (this.lname[ind] == 'IntergratedControlUnit兵团') {
          if (this.gkdy.indexOf('优先') != -1) {
            //cxdata.push({name:this.lname[ind]+'@'+this.lname[ind]+'#1_unique_1(0_21)',attributeFilter:"HJGKDYBM like '%"+shiCode+"%'"})
            dycxdata.push(1)
          }
          if (this.gkdy.indexOf('重点') != -1) {
            //cxdata.push({name:this.lname[ind]+'@'+this.lname[ind]+'#1_unique_2(0_21)',attributeFilter:"HJGKDYBM like '%"+shiCode+"%'"})
            dycxdata.push(2)
          }
          if (this.gkdy.indexOf('一般') != -1) {
            //cxdata.push({name:this.lname[ind]+'@'+this.lname[ind]+'#1_unique_3(0_21)',attributeFilter:"HJGKDYBM like '%"+shiCode+"%'"})
            dycxdata.push(3)
          }
        } else {
          if (shiCode.length == 1 && notdaiguanCode.length == 0) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' AND PROV='新疆生产建设兵团'" })
          } else if (shiCode.length == 1 && notdaiguanCode.length == 1) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' AND HJYSGKFQBM not like  '%" + notdaiguanCode[0] + "%' AND PROV='新疆生产建设兵团'" })
          } else if (shiCode.length == 1 && notdaiguanCode.length == 2) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' AND HJYSGKFQBM not like  '%" + notdaiguanCode[0] + "%' AND HJYSGKFQBM not like  '%" + notdaiguanCode[1] + "%' AND PROV='新疆生产建设兵团'" })
          } else if (shiCode.length == 2 && notdaiguanCode.length == 0) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' OR HJYSGKFQBM like '%" + shiCode[1] + "%' AND PROV='新疆生产建设兵团'" })
          } else if (shiCode.length == 2 && notdaiguanCode.length == 1) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' OR HJYSGKFQBM like '%" + shiCode[1] + "%'AND HJYSGKFQBM not like  '%" + notdaiguanCode[0] + "%' AND PROV='新疆生产建设兵团'" })
          } else if (shiCode.length == 2 && notdaiguanCode.length == 2) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' OR HJYSGKFQBM like '%" + shiCode[1] + "%'AND HJYSGKFQBM not like  '%" + notdaiguanCode[0] + "%' AND HJYSGKFQBM not like  '%" + notdaiguanCode[1] + "%' AND PROV='新疆生产建设兵团'" })
          } else if (shiCode.length == 3) {
            cxdata.push({ name: this.lname[ind] + '@' + this.lname[ind] + '(0_21)', attributeFilter: "HJYSGKFQBM like '%" + shiCode[0] + "%' OR HJYSGKFQBM like '%" + shiCode[1] + "%' OR HJYSGKFQBM like '%" + shiCode[2] + "%' AND PROV='新疆生产建设兵团' " })
            /*ceshi="HJYSGKFQBM like '%"+shiCode[0]+"%' OR HJYSGKFQBM like '%" +shiCode[1]+"%' OR HJYSGKFQBM like '%" +shiCode[2]+"%' "
            cxdata.push(this.lname[ind]+':'+this.lname[ind])*/
          }

        }
      }
      console.log(cxdata)
      if (cxdata.length != 0) {
        var param = new QueryBySQLParameters({
          queryParams: cxdata
        });
        new QueryService(this.url).queryBySQL(param, (serviceResult) => {
          console.log(serviceResult)
          this.infoZk = true;
          document.getElementById('map').style.width = '70%';
          map.updateSize();
          for (let x = 0; x < serviceResult.result.recordsets.length; x++) {
            if (serviceResult.result.recordsets[x].features.features.length == 0) {
              continue
            }
            if (serviceResult.result.recordsets[x].features.features[0].properties.HJGKDYBM) {
              if (this.gkdy.indexOf('优先') != -1) {
                for (let i = 0; i < serviceResult.result.recordsets[x].features.features.length; i++) {
                  if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "1") {
                    var yxfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    yxSource.addFeature(yxfeature)
                  }
                }
              }
              if (this.gkdy.indexOf('重点') != -1) {
                for (let i = 0; i < serviceResult.result.recordsets[x].features.features.length; i++) {
                  if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "2") {
                    var zdfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    zdSource.addFeature(zdfeature)
                  }
                }
              }
              if (this.gkdy.indexOf('一般') != -1) {
                for (let i = 0; i < serviceResult.result.recordsets[x].features.features.length; i++) {
                  if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "3") {
                    var ybfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    ybSource.addFeature(ybfeature)
                  }
                }
              }
            } else {
              if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "1") {
                var hxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                for (let o = 0; o < hxfeatures.length; o++) {
                  hxfeatures[o].setId(hxfeatures[o].values_.HJYSGKFQBM);
                  if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == "生态保护红线-生态功能重要区域") {
                    hxfeatures[o].setStyle(StyleHx(hxfeatures[o]));
                    hxSource.addFeature(hxfeatures[o]);
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == "一般生态空间") {
                    hxfeatures[o].setStyle(StyleHxQiTa(hxfeatures[o]));
                    hxSource.addFeature(hxfeatures[o]);
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == "其他区域") {
                    hxfeatures[o].setStyle(StyleHxQiTa(hxfeatures[o]));
                    hxSource.addFeature(hxfeatures[o]);
                  }
                }
              }
              else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "2") {
                var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                for (let o = 0; o < dxfeatures.length; o++) {
                  dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                  if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "1") {
                    dxfeatures[o].setStyle(StyleShuiYX(dxfeatures[o]));
                    dxSource.addFeature(dxfeatures[o]);
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "2") {
                    if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '水环境农业污染重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiNongYe(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '水环境工业污染重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiGongYe(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '水环境其他重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiQiTa(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '水环境城镇生活污染重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiChengZhen(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    }
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "3") {
                    dxfeatures[o].setStyle(StyleHxQiTa(dxfeatures[o]));
                    dxSource.addFeature(dxfeatures[o]);
                  }
                }
              } else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "3") {
                var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                for (let o = 0; o < dxfeatures.length; o++) {
                  dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                  if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "1") {
                    dxfeatures[o].setStyle(StyleShuiYX(dxfeatures[o]));
                    dxSource.addFeature(dxfeatures[o])
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "2") {
                    if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '大气环境弱扩散重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiNongYe(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '大气环境高排放重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiGongYe(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '大气环境受体敏感重点管控区') {
                      dxfeatures[o].setStyle(StyleDaQiShouTiMinGan(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '大气环境布局敏感重点管控区') {
                      dxfeatures[o].setStyle(StyleShuiChengZhen(dxfeatures[o]));
                      dxSource.addFeature(dxfeatures[o]);
                    }
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "3") {
                    dxfeatures[o].setStyle(StyleHxQiTa(dxfeatures[o]));
                    dxSource.addFeature(dxfeatures[o])
                  }
                }
              } else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "4") {
                var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                for (let o = 0; o < dxfeatures.length; o++) {
                  dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                  dxSource.addFeature(dxfeatures[o])
                }
              }
              else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "5") {
                var sxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                for (let o = 0; o < sxfeatures.length; o++) {
                  sxfeatures[o].setId(sxfeatures[o].values_.HJYSGKFQBM);
                  if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "2") {
                    if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '地下水开采重点管控区') {
                      sxfeatures[o].setStyle(StyleDiXiaShui(sxfeatures[o]));
                      sxSource.addFeature(sxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '高污染燃料禁燃区') {
                      sxfeatures[o].setStyle(StyleGaoWuRanRanLiao(sxfeatures[o]));
                      sxSource.addFeature(sxfeatures[o]);
                    } else if (serviceResult.result.recordsets[x].features.features[o].properties.YSXL == '生态用水补给区') {
                      sxfeatures[o].setStyle(StyleShengTaiYongShui(sxfeatures[o]));
                      sxSource.addFeature(sxfeatures[o]);
                    }
                  } else if (serviceResult.result.recordsets[x].features.features[o].properties.GKQFL == "3") {
                    sxfeatures[o].setStyle(StyleShuiQiTa(sxfeatures[o]));
                    sxSource.addFeature(sxfeatures[o])
                  }
                }
              }
            }
          }
        });
      }
      /* if(cxdata.length!=0){
         var param   = new GetFeaturesBySQLParameters({
           queryParameter: {
             attributeFilter:ceshi
           },
           toIndex:-1,
           datasetNames:cxdata
         });
         new FeatureService(this.dataurl).getFeaturesBySQL(param, (serviceResult)=> {
           console.log(serviceResult)
           this.infoZk=true;
           document.getElementById('map').style.width='70%';
           map.updateSize();
           for(let i=0;i<serviceResult.result.features.features.length;i++){
             if(serviceResult.result.features.features.length==0){
               continue
             }
             if(serviceResult.result.features.features[i].properties.HJGKDYBM){
               if(this.gkdy.indexOf('优先')!=-1){
                   if(serviceResult.result.features.features[i].properties.GKDYFL=="1"){
                     var yxfeature=(new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                     yxSource.addFeature(yxfeature)
                 }
               }
               if (this.gkdy.indexOf('重点')!=-1){
                   if (serviceResult.result.features.features[i].properties.GKDYFL == "2") {
                     var zdfeature = (new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                     zdSource.addFeature(zdfeature)
                 }
               }
               if (this.gkdy.indexOf('一般')!=-1){
                 for(let i=0;i<serviceResult.result.recordsets[x].features.features.length;i++) {
                   if (serviceResult.result.features.features[i].properties.GKDYFL == "3") {
                     var ybfeature = (new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                     ybSource.addFeature(ybfeature)
                   }
                 }
               }
             }else {
               if(serviceResult.result.features.features[i].properties.HJYS=="1"){
                 var hxfeature=(new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                   if(serviceResult.result.features.features[i].properties.YSXL=="生态保护红线-生态功能重要区域"){
                     hxfeature.setStyle(StyleHx(hxfeature));
                     hxSource.addFeature(hxfeature);
                   }else if(serviceResult.result.features.features[i].properties.YSXL=="一般生态空间"){
                     hxfeature.setStyle(StyleHxQiTa(hxfeature));
                     hxSource.addFeature(hxfeature);
                   }else if(serviceResult.result.features.features[i].properties.YSXL=="其他区域"){
                     hxfeature.setStyle(StyleHxQiTa(hxfeature));
                     hxSource.addFeature(hxfeature);
                 }
               }
               else if(serviceResult.result.features.features[i].properties.HJYS=="2"){
                  var dxfeature=(new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                   if(serviceResult.result.features.features[i].properties.GKQFL=="1"){
                     dxfeature.setStyle(StyleShuiYX(dxfeature));
                     dxSource.addFeature(dxfeature);
                   }else if(serviceResult.result.features.features[i].properties.GKQFL=="2"){
                     if(serviceResult.result.features.features[i].properties.YSXL=='水环境农业污染重点管控区'){
                       dxfeature.setStyle(StyleShuiNongYe(dxfeature));
                       dxSource.addFeature(dxfeature);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='水环境工业污染重点管控区'){
                       dxfeature.setStyle(StyleShuiGongYe(dxfeature));
                       dxSource.addFeature(dxfeature);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='水环境其他重点管控区'){
                       dxfeature.setStyle(StyleShuiQiTa(dxfeature));
                       dxSource.addFeature(dxfeature);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='水环境城镇生活污染重点管控区'){
                       dxfeature.setStyle(StyleShuiChengZhen(dxfeature));
                       dxSource.addFeature(dxfeature);
                     }
                   }else if(serviceResult.result.features.features[i].properties.GKQFL=="3"){
                     dxfeature.setStyle(StyleHxQiTa(dxfeature));
                     dxSource.addFeature(dxfeature);
                   }
               } else if(serviceResult.result.features.features[i].properties.HJYS=="3"){
                 var dxfeature2=(new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                   if(serviceResult.result.features.features[i].properties.GKQFL=="1"){
                     dxfeature2.setStyle(StyleShuiYX(dxfeature2));
                     dxSource.addFeature(dxfeature2)
                   }else if(serviceResult.result.features.features[i].properties.GKQFL=="2"){
                     if(serviceResult.result.features.features[i].properties.YSXL=='大气环境弱扩散重点管控区'){
                       dxfeature2.setStyle(StyleShuiNongYe(dxfeature2));
                       dxSource.addFeature(dxfeature2);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='大气环境高排放重点管控区'){
                       dxfeature2.setStyle(StyleShuiGongYe(dxfeature2));
                       dxSource.addFeature(dxfeature2);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='大气环境受体敏感重点管控区'){
                       dxfeature2.setStyle(StyleDaQiShouTiMinGan(dxfeature2));
                       dxSource.addFeature(dxfeature2);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='大气环境布局敏感重点管控区'){
                       dxfeature2.setStyle(StyleShuiChengZhen(dxfeature2));
                       dxSource.addFeature(dxfeature2);
                     }
                   }else if(serviceResult.result.features.features[i].properties.GKQFL=="3"){
                     dxfeature2.setStyle(StyleHxQiTa(dxfeature2));
                     dxSource.addFeature(dxfeature2)
                   }
               }else if(serviceResult.result.features.features[i].properties.HJYS=="4"){
                 var dxfeature=(new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                   dxSource.addFeature(dxfeature)
               }
               else if(serviceResult.result.features.features[i].properties.HJYS=="5"){
                 var sxfeature=(new GeoJSON()).readFeature(serviceResult.result.features.features[i]);
                   if(serviceResult.result.features.features[i].properties.GKQFL=="2"){
                     if(serviceResult.result.features.features[i].properties.YSXL=='地下水开采重点管控区'){
                       sxfeature.setStyle(StyleDiXiaShui(sxfeature));
                       sxSource.addFeature(sxfeature);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='高污染燃料禁燃区'){
                       sxfeature.setStyle(StyleGaoWuRanRanLiao(sxfeature));
                       sxSource.addFeature(sxfeature);
                     }else if(serviceResult.result.features.features[i].properties.YSXL=='生态用水补给区'){
                       sxfeature.setStyle(StyleShengTaiYongShui(sxfeature));
                       sxSource.addFeature(sxfeature);
                     }
                   }else if(serviceResult.result.features.features[i].properties.GKQFL=="3"){
                     sxfeature.setStyle(StyleShuiQiTa(sxfeature));
                     sxSource.addFeature(sxfeature)
                   }
               }
             }
           }
         });
       }*/

      if (dycxdata.length == 0) {

      } else {
        var danyuansql = ''
        if (shiCode.length == 1 && notdaiguanCode.length == 0) {
          if (dycxdata.length == 1) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        } else if (shiCode.length == 1 && notdaiguanCode.length == 1) {
          if (dycxdata.length == 1) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%'" + " AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%'  AND HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%'" + " AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%'" + "AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        } else if (shiCode.length == 1 && notdaiguanCode.length == 2) {
          if (dycxdata.length == 1) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' " + " AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%'  AND HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%'" + " AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "HJGKDYBM like '%" + shiCode[0] + "%' AND HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%'  AND HJGKDYBM   not like  '%" + notdaiguanCode[1] + "%' AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        } else if (shiCode.length == 2 && notdaiguanCode.length == 0) {
          if (dycxdata.length == 1) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%') AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%') AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        } else if (shiCode.length == 2 && notdaiguanCode.length == 1) {
          if (dycxdata.length == 1) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND   HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' " + "  AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND   HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' " + " AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND   HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' " + "AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        } else if (shiCode.length == 2 && notdaiguanCode.length == 2) {
          if (dycxdata.length == 1) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND   HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' AND   HJGKDYBM   not like  '%" + notdaiguanCode[1] + "%'" + " AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND   HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' AND   HJGKDYBM   not like  '%" + notdaiguanCode[1] + "%'" + " AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%')  AND   HJGKDYBM   not like  '%" + notdaiguanCode[0] + "%' AND   HJGKDYBM   not like  '%" + notdaiguanCode[1] + "%'" + "AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        } else if (shiCode.length == 3) {
          if (dycxdata.length == 1) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%' OR HJGKDYBM like '%" + shiCode[2] + "%') " + " AND GKDYFL = " + dycxdata[0]
          } else if (dycxdata.length == 2) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%' OR HJGKDYBM like  '%" + shiCode[2] + "%')" + " AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + ")"
          } else if (dycxdata.length == 3) {
            danyuansql = "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%' OR HJGKDYBM like '%" + shiCode[2] + "%' ) " + "AND (GKDYFL = " + dycxdata[0] + " OR GKDYFL =" + dycxdata[1] + " OR GKDYFL =" + dycxdata[2] + ")"
          }
        }

        console.log(danyuansql)
        var danyuanParam = new GetFeaturesBySQLParameters({
          queryParameter: {
            name: "IntergratedControlUnit兵团@IntergratedControlUnit兵团",
            attributeFilter: danyuansql
          },
          toIndex: -1,
          datasetNames: ["IntergratedControlUnit兵团:IntergratedControlUnit兵团"]
        });
        new FeatureService(this.dataurl).getFeaturesBySQL(danyuanParam, (serviceResult) => {
          if (this.gkdy.indexOf('优先') != -1) {
            for (let i = 0; i < serviceResult.result.features.features.length; i++) {
              if (serviceResult.result.features.features[i].properties.GKDYFL == "1") {
                var yxfeature = (new GeoJSON()).readFeatures(serviceResult.result.features.features[i])[0];
                yxSource.addFeature(yxfeature)
              }
            }
          }
          if (this.gkdy.indexOf('重点') != -1) {
            for (let i = 0; i < serviceResult.result.features.features.length; i++) {
              if (serviceResult.result.features.features[i].properties.GKDYFL == "2") {
                var zdfeature = (new GeoJSON()).readFeatures(serviceResult.result.features.features[i])[0];
                zdSource.addFeature(zdfeature)
              }
            }
          }
          if (this.gkdy.indexOf('一般') != -1) {
            for (let i = 0; i < serviceResult.result.features.features.length; i++) {
              if (serviceResult.result.features.features[i].properties.GKDYFL == "3") {
                var ybfeature = (new GeoJSON()).readFeatures(serviceResult.result.features.features[i])[0];
                ybSource.addFeature(ybfeature)
              }
            }
          }
        })
      }
    },
    async cxLayerBingTuan() {
      const { data: res } = await this.$http.post('/v1.0/resultIntegration/environmentAttribute/findAllByCatalogIdList', { catalogIdList: this.queryInfo.catalogIdList })
      /*  params:JSON.stringify(this.queryInfo)*/
      if (res.status !== "3000") {
        return
      }
      this.chaxunData = res.data;
      this.ActiveName = Object.keys(this.chaxunData[0])[0]
      this.infoZk = true;
      document.getElementById('map').style.width = '70%';
      map.updateSize();
    },
    closePop() {
      this.popxy = false;
      this.popxy1 = false;
      this.popxy2 = false;
      this.popxyhldm = false
      this.popxyhk = false
      this.popxyjc = false
      selectSouce.clear();
    },
    ceju() {
      zhuangtai = 0;
      map.on('pointermove', pointerMoveHandler);
      map.on('click', function (evt) {
        if (zhuangtai == 1) {
          return;
        }
        var coordinate = evt.coordinate; //鼠标单击点的坐标
        if (output == "0") {
          lastPolygonLabelFeature = null;
          if (lastLengthLabelFeature) {
            source.removeFeature(lastLengthLabelFeature);
            lastLengthLabelFeature = null;
          }
          return;
        }
        var Coord;
        if (sketch) {
          var geom = sketch.getGeometry();
          if (geom instanceof Polygon) {
            if (lastPolygonLabelFeature) {
              source.removeFeature(lastPolygonLabelFeature);
            }
            Coord = geom.getInteriorPoint().getCoordinates();    //新建一个要素ol.Feature
            var newFeature = Feature({
              geometry: new Point(Coord), //几何信息
              name: output
            });
            lastPolygonLabelFeature = newFeature;
            newFeature.setStyle(createLabelStyle(newFeature, 0, 0)); //设置要素样式
            source.addFeature(newFeature);
          } else if (geom instanceof LineString) {
            Coord = geom.getLastCoordinate();  //新建一个要素ol.Feature
            var newFeature = new Feature({
              geometry: new Point(Coord), //几何信息
              name: output
            });
            newFeature.setStyle(createLabelStyle(newFeature, 35, -10)); //设置要素样式
            source.addFeature(newFeature);
          }
          var pointFeature = new Feature({
            geometry: new Point(coordinate), //几何信息
            name: output
          });
          source.addFeature(pointFeature);
        }
      });
      if (draw) {
        map.removeInteraction(draw);
      }
      this.addInteraction("length");
    },
    cemian() {
      sketch = null;
      zhuangtai = 1;
      map.on('pointermove', pointerMoveHandler);
      map.on('click', function (evt) {
        var coordinate = evt.coordinate; //鼠标单击点的坐标
        if (output == "0") {
          lastPolygonLabelFeature = null;
          if (lastLengthLabelFeature) {
            source.removeFeature(lastLengthLabelFeature);
            lastLengthLabelFeature = null;
          }
          return;
        }
        var Coord;
        if (sketch) {
          var geom = sketch.getGeometry();
          if (geom instanceof Polygon) {
            if (lastPolygonLabelFeature) {
              source.removeFeature(lastPolygonLabelFeature);
            }
            Coord = geom.getInteriorPoint().getCoordinates();    //新建一个要素ol.Feature
            var newFeature = new Feature({
              geometry: new Point(Coord), //几何信息
              name: output
            });
            lastPolygonLabelFeature = newFeature;
            newFeature.setStyle(createLabelStyle(newFeature, 0, 0)); //设置要素样式
            source.addFeature(newFeature);
          } else if (geom instanceof LineString) {
            Coord = geom.getLastCoordinate();  //新建一个要素ol.Feature

            var newFeature = new Feature({
              geometry: new Point(Coord), //几何信息
              name: output
            });
            newFeature.setStyle(createLabelStyle(newFeature, 35, -10)); //设置要素样式

            source.addFeature(newFeature);
          }
          var pointFeature = new Feature({
            geometry: new Point(coordinate), //几何信息
            name: output
          });
          source.addFeature(pointFeature);
        }
      });
      if (draw) {
        map.removeInteraction(draw);
      }
      this.addInteraction("area");
    },
    addInteraction(drawType) {
      var type = (drawType == 'area' ? 'Polygon' : 'LineString');
      draw = new Draw({
        source: source,
        type: type,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 0, 0, 0.2)'
          }),
          stroke: new Stroke({
            color: 'rgb(255,116,3)',
            // lineDash: [10, 10],//虚线
            width: 2
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: 'rgba(255, 0, 0, 0.1)'
            }),
            fill: new Fill({
              color: 'rgba(255,116,3, 0.3)'
            })
          })
        })
      });
      map.addInteraction(draw);
      var listener;
      draw.on('drawstart', function (evt) {  // set sketch
        sketch = evt.feature;
        listener = sketch.getGeometry().on('change', function (evt) {
          var geom = evt.target;
          if (geom instanceof Polygon) {
            output = formatArea(geom);
          } else if (geom instanceof LineString) {
            output = formatLength(geom);
          }
        });
      }, this);
      draw.on('drawend', function () {  // unset sketch
        sketch = null;
        unByKey(listener);
        output = "0";
      }, this);
    },
    async hxcx() {
      source.clear();
      this.clearInteraction();
      draw = new Draw({
        source: source,
        type: "LineString",
        snapTolerance: 20
      });
      map.addInteraction(draw);
      /* const {data:result}= await this.$http2.get('/iserver/services/map-shp-sxydshp/rest/maps/sxydshp/layers/sxydshp.rjson')
       //var obj = eval('(' + result.data + ')');
       var layerData=[];
       for(let x in result.subLayers.layers){
         if(x%2==0){
           layerData.push({name:result.subLayers.layers[x].name})
         }
       }*/
      draw.on('drawend', (evt3) => {
        this.clearInteraction();
        var geoLine = evt3.feature.getGeometry();
        var lineParam = new QueryByGeometryParameters({
          queryParams: this.layerData,
          geometry: geoLine
        });
        hxSource.clear();
        sxSource.clear();
        dxSource.clear();
        yxSource.clear();
        zdSource.clear();
        ybSource.clear();
        new QueryService(this.url).queryByGeometry(lineParam, (serviceResult) => {
          for (let x = 0; x < serviceResult.result.recordsets.length; x++) {
            if (serviceResult.result.recordsets[x].features.features.length != 0) {
              if (serviceResult.result.recordsets[x].features.features[0].properties.HJGKDYBM) {
                for (let i = 0; i < serviceResult.result.recordsets[x].features.features.length; i++) {
                  if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "1") {
                    var yxfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    yxSource.addFeature(yxfeature)
                  }
                  else if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "2") {
                    var zdfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    zdSource.addFeature(zdfeature)
                  }
                  else if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "3") {
                    var ybfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    ybSource.addFeature(ybfeature)
                  }
                }
              } else {
                if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "1") {
                  var hxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < hxfeatures.length; o++) {
                    hxfeatures[o].setId(hxfeatures[o].values_.HJYSGKFQBM);
                    hxSource.addFeature(hxfeatures[o]);
                  }
                }
                else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "2") {
                  var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < dxfeatures.length; o++) {
                    dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                    dxSource.addFeature(dxfeatures[o])
                  }
                } else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "3") {
                  var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < dxfeatures.length; o++) {
                    dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                    dxSource.addFeature(dxfeatures[o])
                  }
                } else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "4") {
                  var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < dxfeatures.length; o++) {
                    dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                    dxSource.addFeature(dxfeatures[o])
                  }
                }
                else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "5") {
                  var sxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < sxfeatures.length; o++) {
                    sxfeatures[o].setId(sxfeatures[o].values_.HJYSGKFQBM);
                    sxSource.addFeature(sxfeatures[o])
                  }
                }
              }
            }
          }
        });
      })
    },
    async hmcx() {
      source.clear();
      this.clearInteraction();
      draw = new Draw({
        source: source,
        type: "Polygon",
        snapTolerance: 20
      });
      map.addInteraction(draw);
      draw.on('drawend', (evt3) => {
        this.clearInteraction();
        var geoLine = evt3.feature.getGeometry();
        var lineParam = new QueryByGeometryParameters({
          queryParams: this.layerData,
          geometry: geoLine
        });
        hxSource.clear();
        sxSource.clear();
        dxSource.clear();
        yxSource.clear();
        zdSource.clear();
        ybSource.clear();
        new QueryService(this.url).queryByGeometry(lineParam, (serviceResult) => {
          for (let x = 0; x < serviceResult.result.recordsets.length; x++) {
            if (serviceResult.result.recordsets[x].features.features.length != 0) {
              if (serviceResult.result.recordsets[x].features.features[0].properties.HJGKDYBM) {
                for (let i = 0; i < serviceResult.result.recordsets[x].features.features.length; i++) {
                  if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "1") {
                    var yxfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    yxSource.addFeature(yxfeature)
                  }
                  else if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "2") {
                    var zdfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    zdSource.addFeature(zdfeature)
                  }
                  else if (serviceResult.result.recordsets[x].features.features[i].properties.GKDYFL == "3") {
                    var ybfeature = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features.features[i])[0];
                    ybSource.addFeature(ybfeature)
                  }
                }
              } else {
                if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "1") {
                  var hxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < hxfeatures.length; o++) {
                    hxfeatures[o].setId(hxfeatures[o].values_.HJYSGKFQBM);
                    hxSource.addFeature(hxfeatures[o]);
                  }
                }
                else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "2") {
                  var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < dxfeatures.length; o++) {
                    dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                    dxSource.addFeature(dxfeatures[o])
                  }
                } else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "3") {
                  var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < dxfeatures.length; o++) {
                    dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                    dxSource.addFeature(dxfeatures[o])
                  }
                } else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "4") {
                  var dxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < dxfeatures.length; o++) {
                    dxfeatures[o].setId(dxfeatures[o].values_.HJYSGKFQBM);
                    dxSource.addFeature(dxfeatures[o])
                  }
                }
                else if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == "5") {
                  var sxfeatures = (new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features);
                  for (let o = 0; o < sxfeatures.length; o++) {
                    sxfeatures[o].setId(sxfeatures[o].values_.HJYSGKFQBM);
                    sxSource.addFeature(sxfeatures[o])
                  }
                }
              }
            }
          }
        });
      })
    },
    qingchu() {
      map.removeInteraction(draw);
      source.clear();
      source1.clear();
      hxSource.clear();
      sxSource.clear();
      dxSource.clear();
      yxSource.clear();
      zdSource.clear();
      ybSource.clear();
      pSource.clear();
      this.stbhhxData1 = [],
        this.ybstkjData1 = [],
        this.qitaData1 = [],
        this.shjyxData1 = [],
        this.shjzdData1 = [],
        this.shjybData1 = [],
        this.dqhjyxData1 = [],
        this.dqhjzdData1 = [],
        this.dqhjybData1 = [],
        this.trhjyxData1 = [],
        this.trhjzdData1 = [],
        this.trhjybData1 = [],
        this.zrzyzdData1 = [],
        this.zrzyybData1 = [],
        this.sxqtData1 = [],
        this.yxbhData1 = [],
        this.zdgkData1 = [],
        this.ybgkData1 = [];
      lastPolygonLabelFeature = null;
      lastLengthLabelFeature = null;
      lastCircleLabelFeature = null;
      click = false;
      sketch = null;
      output = "0";
    },
    clearInteraction() {
      if (draw) {
        map.removeInteraction(draw);
      }
    },
    yingxiang() {
      if (this.yingx == '影像') {
        tdtslLayer.setVisible(false);
        tdtbqLayer.setVisible(false);
        tdtyxLayer.setVisible(true);
        tdtyxzjLayer.setVisible(true);
        this.yingx = '矢量'
      } else if (this.yingx == '矢量') {
        tdtyxzjLayer.setVisible(false);
        tdtyxLayer.setVisible(false);
        tdtslLayer.setVisible(true);
        tdtbqLayer.setVisible(true);
        this.yingx = '影像'
      }
    },
    zhuanti() {
      var chinaConsumptionLevel = [
        ["第一师", 81.277840902, 40.547068742, 22023, 24982, 27760, 30350, 33337],
        ["第二师", 85.672922222, 41.867275, 15200, 17852, 20624, 22984, 26261],
        ["第三师", 79.071925, 39.867719444, 26582, 32271, 35439, 36893, 39223],
        ["第四师", 81.037599507, 43.923116438, 8494, 9723, 11832, 13655, 15270],
        ["第五师", 82.069213889, 44.888722222, 7922, 9121, 10634, 11601, 12978],
        ["第六师", 87.540233359, 44.16617618, 8538, 9241, 10811, 12276, 13676],
        ["第七师", 84.901516667, 44.430636111, 10906, 13016, 15635, 17999, 20156],
        ["第八师", 86.07755, 44.303947222, 6854, 8447, 9746, 10829, 12078],
        ["第九师", 83.609342141, 46.517751008, 7193, 8057, 9551, 10749, 11557],
        ["第十师", 87.830919424, 47.325244407, 7154, 8474, 10053, 11852, 13206],
        ["第十一师", 87.595465116, 43.857920905, 5509, 6234, 7493, 8542, 9616],
        ["第十二师", 87.534985988, 43.913105002, 6863, 8182, 9903, 11280, 12485],
        ["第十三师", 93.546963889, 42.825463889, 5456, 6218, 7389, 8372, 9541],
        ["第十四师", 79.28838135, 37.209817352, 5976, 6811, 8278, 9782, 11224],
      ];

      map.addOverlay(overlay);
      var features = [];
      for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
        // 省居民消费水平（单位：元）信息
        var provinceInfo = chinaConsumptionLevel[i];
        var geo = new Point([provinceInfo[1], provinceInfo[2]]);
        //ThemeFeature 格式类型
        // var fea = new ol.supermap.ThemeFeature(geo, attrs);
        //支持传入 ol.Feature 格式类型：
        var fea = new Feature({
          geometry: geo,
          NAME: provinceInfo[0],
          CON2009: provinceInfo[3]
        });
        features.push(fea);
      }
      // 创建一个圆形符号专题图层
      themeSource = new RankSymbol("RankSymbolLayer", "Circle",
        {
          map: map,
          attributions: " ",
          themeField: "CON2009",
          // 配置图表参数
          symbolSetting: {
            //必设参数
            codomain: [0, 40000], // 允许图形展示的值域范围，此范围外的数据将不制作图图形
            //圆最大半径 默认100
            maxR: 50,
            //圆最小半径 默认0
            minR: 0,
            // 圆形样式
            circleStyle: { fillOpacity: 0.8 },
            // 符号专题图填充颜色
            fillColor: "#FFA500",
            // 专题图hover 样式
            circleHoverStyle: { fillOpacity: 1 }
          }
        });
      themeSource.on("mousemove", this.showInfoWin);
      themeSource.addFeatures(features);
      var pointerInteraction = new Pointer({
        handleMoveEvent: function (event) {
          themeSource.fire('mousemove', event);
        }
      });
      map.addInteraction(pointerInteraction);
      map.addLayer(new ImageLayer({
        source: themeSource
      }));
      themeSource.setOpacity(0.1);
    },
    showInfoWin(e) {
      if (e.target && e.target.refDataID && e.target.dataInfo) {
        if (overlay) {
          overlay.setPosition(undefined);
        }
        // 获取图形对应的数据 (feature)
        var fea = themeSource.getFeatureById(e.target.refDataID);
        var info = e.target.dataInfo;
        // 弹窗内容
        var contentHTML = "<div style='color: #000; background-color: #fff'>";
        contentHTML += "<strong>" + fea.attributes.NAME + "</strong>";
        contentHTML += "<hr style='margin: 3px'>";
        switch (info.field) {
          case "CON2009":
            contentHTML += "环境管控单元面积：" + " <br/><strong>" + info.value + "</strong>（" + '平分米' + "）";
            break;
          default:
            contentHTML += "No Data";
        }
        contentHTML += "</div>";
        content.innerHTML = contentHTML;
        overlay.setPosition(map.getCoordinateFromPixel([e.event.x, e.event.y]));
        return;
      }
      if (overlay) {
        overlay.setPosition(undefined);
      }
    },
    guanbiInfo() {
      this.infoZk = false;
      document.getElementById('map').style.width = '100%';
      map.updateSize();
    },
    clearInfo() {
      hxSource.clear();
      sxSource.clear();
      dxSource.clear();
      yxSource.clear();
      zdSource.clear();
      ybSource.clear();
      source.clear();
      source1.clear();
      eventBus.$emit('clearTree', 'clear')
    },
    async fenxi(geome) {
      this.info.Numyx = 0;
      this.info.Numzd = 0;
      this.info.Numyb = 0;
      this.info.yxList = [];
      this.info.zdList = [];
      this.info.ybList = [];

      var fenxiParam = new QueryByGeometryParameters({
        queryParams: layerData,
        geometry: geome
      });
      new QueryService(this.url).queryByGeometry(fenxiParam, (serviceResult) => {
        for (let x = 0; x < serviceResult.result.recordsets.length; x++) {
          if (serviceResult.result.recordsets[x].features.features.length != 0) {
            if (serviceResult.result.recordsets[x].features.features[0].properties.GKQFL == "1") {
              this.info.Numyx++;
              this.info.yxList.push({ name: serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQMC, feature: serviceResult.result.recordsets[x].features })
            } else if (serviceResult.result.recordsets[x].features.features[0].properties.GKQFL == "2") {
              this.info.Numzd++
              this.info.zdList.push({ name: serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQMC, feature: serviceResult.result.recordsets[x].features })
            } else if (serviceResult.result.recordsets[x].features.features[0].properties.GKQFL == "3") {
              this.info.Numyb++
              this.info.ybList.push({ name: serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQMC, feature: serviceResult.result.recordsets[x].features })
            }
          } else {
          }
        }
      });
      this.infoZk = true;
      document.getElementById('map').style.width = '80%';
      map.updateSize();

    },
    dingwei(geo) {
      this.popdata.ysxl = geo.properties.YSXL;
      this.popdata.fqbm = geo.properties.HJYSGKFQBM;
      this.popdata.smc = geo.properties.PROV;
      this.popdata.djmc = geo.properties.CITY;
      this.popdata.xmc = geo.properties.COUNTY;
      this.popdata.hjys = geo.properties.HJYSGKFQMC;
      this.popdata.length = geo.properties.Shape_Leng * 100 + '千米';
      this.popdata.area = (geo.properties.Shape_Area * 10000).toFixed(2) + '平方千米';
      this.popxy = true;
      this.popxy1 = false;
      map.addOverlay(popO);
      popO.setPosition(geo.geometry.coordinates[0][0][1])
      //popO.setPosition(olExtent.getCenter((new GeoJSON()).readFeature(geo).getGeometry().getExtent()));
      //map.getView().setCenter(olExtent.getCenter((new GeoJSON()).readFeature(geo).getGeometry().getExtent()));
      map.getView().setCenter(geo.geometry.coordinates[0][0][1]);
    },
    dingwei1(geo) {
      this.pop1data.ysxl = geo.properties.REMARKS;
      this.pop1data.fqbm = geo.properties.HJGKDYBM;
      this.pop1data.smc = geo.properties.PROV;
      this.pop1data.djmc = geo.properties.CITY;
      this.pop1data.xmc = geo.properties.COUNTY;
      this.pop1data.hjys = geo.properties.HJGKDYMC;
      this.pop1data.length = geo.properties.Shape_Leng * 100 + '千米';
      this.pop1data.area = (geo.properties.Shape_Area * 10000).toFixed(2) + '平方千米';
      this.popxy = false;
      this.popxy1 = true;
      map.addOverlay(pop1);
      pop1.setPosition(geo.geometry.coordinates[0][0][1])
      //popO.setPosition(olExtent.getCenter((new GeoJSON()).readFeature(geo).getGeometry().getExtent()));
      //map.getView().setCenter(olExtent.getCenter((new GeoJSON()).readFeature(geo).getGeometry().getExtent()));
      map.getView().setCenter(geo.geometry.coordinates[0][0][1]);
    },
    tuliShow() {
      this.tlbtnshow = false;
      this.tlshow = true;
    },
    tuliShow3D() {
      this.tlbtnshow3D = false;
      this.tlshow3D = true;
    },
    closeTl() {
      this.tlbtnshow = true;
      this.tlshow = false;
    },
    closeTl3D() {
      this.tlbtnshow3D = true;
      this.tlshow3D = false;
    },
    paging(tableData) {
      return tableData.slice((this.tInfo.pageNumber - 1) * this.tInfo.pageSize, (this.tInfo.pageNumber - 1) * this.tInfo.pageSize + this.tInfo.pageSize)
    },
    handleSizeChange(val) {
      this.tInfo.pageSize = val
      this.fanye()
    },
    handleCurrentChange(val) {
      this.tInfo.pageNumber = val
      this.fanye()
    },
    yitabClick(tab, event) {
      if (this.ActiveName == 'hx') {
        this.hxActiveName = '生态保护红线'
        this.tInfo.tabname = this.hxActiveName;
      } else if (this.ActiveName == 'dx') {
        this.dxActiveName = '水环境优先保护区'
        this.tInfo.tabname = this.dxActiveName;
      } else if (this.ActiveName == 'sx') {
        this.sxActiveName = '自然资源重点保护区'
        this.tInfo.tabname = this.sxActiveName;
      } else if (this.ActiveName == 'dy') {
        this.dyActiveName = '优先保护单元'
        this.tInfo.tabname = this.dyActiveName;
      }
    },
    ertabClick(tab, event) {
      this.tInfo.tabname = tab.name;
      //this.jstotal();
    },
    fanye() {
      if (this.tInfo.tabname == '重点管控单元') {
        this.zdgkData = this.paging(this.zdgkData1)
      } else if (this.tInfo.tabname == '一般管控单元') {
        this.ybgkData = this.paging(this.ybgkData1)
      } else if (this.tInfo.tabname == '优先保护单元') {
        this.yxbhData = this.paging(this.yxbhData1)
      } else if (this.tInfo.tabname == '生态保护红线') {
        this.stbhhxData = this.paging(this.stbhhxData1)
      } else if (this.tInfo.tabname == '一般生态空间') {
        this.ybstkjData = this.paging(this.ybstkjData1)
      } else if (this.tInfo.tabname == '其他') {
        this.qitaData = this.paging(this.qitaData1)
      } else if (this.tInfo.tabname == '水环境优先保护区') {
        this.shjyxData = this.paging(this.shjyxData1)
      } else if (this.tInfo.tabname == '水环境重点管控区') {
        this.shjzdData = this.paging(this.shjzdData1)
      } else if (this.tInfo.tabname == '水环境一般管控区') {
        this.shjybData = this.paging(this.shjybData1)
      } else if (this.tInfo.tabname == '大气环境优先保护区') {
        this.dqhjyxData = this.paging(this.dqhjyxData1)
      } else if (this.tInfo.tabname == '大气环境重点管控区') {
        this.dqhjzdData = this.paging(this.dqhjzdData1)
      } else if (this.tInfo.tabname == '大气环境一般管控区') {
        this.dqhjybData = this.paging(this.dqhjybData1)
      } else if (this.tInfo.tabname == '土壤环境优先保护区') {
        this.trhjyxData = this.paging(this.trhjyxData1)
      } else if (this.tInfo.tabname == '土壤环境重点管控区') {
        this.trhjzdData = this.paging(this.trhjzdData1)
      } else if (this.tInfo.tabname == '土壤环境一般管控区') {
        this.trhjybData = this.paging(this.trhjybData1)
      } else if (this.tInfo.tabname == '自然资源重点保护区') {
        this.zrzyzdData = this.paging(this.zrzyzdData1)
      } else if (this.tInfo.tabname == '自然资源一般管控区') {
        this.zrzyybData = this.paging(this.zrzyybData1)
      }
    },
    bmClick(row) {
      selectSouce.clear();
      selectSouce.addFeature((new GeoJSON()).readFeature(row.feature))
      this.dingwei(row.feature)
    },
    bmDyClick(row) {
      selectSouce.clear();
      selectSouce.addFeature((new GeoJSON()).readFeature(row.feature))
      this.dingwei1(row.feature)
    },
    async guanKongInfo() {
      const { data: res } = await this.$http.get('/v1.0/resultIntegration/achievements/dataPresentation/text/findByUnitCode/' + this.popdata.fqbm)
    },
    async guanKongInfo2() {
      const { data: res } = await this.$http.get('/v1.0/resultIntegration/achievements/dataPresentation/text/findByUnitCode/' + this.pop1data.fqbm)
      if (res.status !== "3000") {
        return this.$message.error('获取管控信息失败！' + res.message)
      }
      // this.danYuanTed=res.data.unitFeature;
      this.kongJianYueS = res.data.spaceRestrain;
      this.wuRanGuanK = res.data.pollutantRestrain;
      this.huanJingFangk = res.data.environmentRestrain;
      this.ziYuanLiY = res.data.resourceUtilization;
      this.gKShow = true;
    },
    async guanKongInfo3() {
      console.log(this.popdata.HJYS)
      if (this.popdata.HJYS == 1) {
        const { data: res } = await this.$http.get('/v1.0/resultIntegration/rule/ecologicalSpaceRule/findByCode/' + this.popdata.fqbm)
        if (res.status !== "3000") {
          return this.$message.error('获取管控信息失败！' + res.message)
        }
        this.kongJianYueS = res.data.spaceRestrain;
        this.wuRanGuanK = res.data.pollutantRestrain;
        this.huanJingFangk = res.data.environmentRestrain;
        this.ziYuanLiY = res.data.resourceUtilization;
      } else if (this.popdata.HJYS == 3) {
        const { data: res } = await this.$http.get('/v1.0/resultIntegration/rule/atmosphereRule/findByCode/' + this.popdata.fqbm)
        if (res.status !== "3000") {
          return this.$message.error('获取管控信息失败！' + res.message)
        }
        this.kongJianYueS = res.data.spaceRestrain;
        this.wuRanGuanK = res.data.pollutantRestrain;
        this.huanJingFangk = res.data.environmentRestrain;
        this.ziYuanLiY = res.data.resourceUtilization;
      } else if (this.popdata.HJYS == 5) {
        const { data: res } = await this.$http.get('/v1.0/resultIntegration/rule/environmentResourceRule/findByCode/' + this.popdata.fqbm)
        if (res.status !== "3000") {
          return this.$message.error('获取管控信息失败！' + res.message)
        }
        this.kongJianYueS = res.data.spaceRestrain;
        this.wuRanGuanK = res.data.pollutantRestrain;
        this.huanJingFangk = res.data.environmentRestrain;
        this.ziYuanLiY = res.data.resourceUtilization;
      }
      this.gKShow = true;
    },
    async guanKongInfo4() {
      const { data: res } = await this.$http.get('/v1.0/resultIntegration/rule/environmentWaterRule/findByCode/' + this.popdata2.fqbm)
      if (res.status !== "3000") {
        return this.$message.error('获取管控信息失败！' + res.message)
      }
      this.kongJianYueS = res.data.spaceRestrain;
      this.wuRanGuanK = res.data.pollutantRestrain;
      this.huanJingFangk = res.data.environmentRestrain;
      this.ziYuanLiY = res.data.resourceUtilization;
      this.gKShow = true;
    },
    tongJi() {
      var myChart = echarts.init(document.getElementById('number'))
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      };
      myChart.setOption(option)
    },
    async chaXunBmClick(chaXunBm) {
      console.log(chaXunBm)
      selectSouce.clear();
      var cxBmData = [], cxBmData2 = [], cxBmData3 = [];
      var shiCode = [];
      shiCode.push(window.sessionStorage.getItem('shi'));
      if (shiCode[0] == '6578') {
        shiCode.push('659001')
      } else if (shiCode[0] == '6573') {
        shiCode.push('659003')
      } else if (shiCode[0] == '6576') {
        shiCode.push('659004')
      } else if (shiCode[0] == '6572') {
        shiCode.push('659006')
      } else if (shiCode[0] == '6574') {
        shiCode.push('659008')
      } else if (shiCode[0] == '6584') {
        shiCode.push('659009')
      }
      console.log(shiCode)
      for (let ind in this.layerData) {
        if (this.layerData[ind].name.split('@')[0].indexOf('IntergratedControlUnit') != -1) {
          if (shiCode.length == 1) {
            cxBmData2.push({ name: this.layerData[ind].name.split('@')[0] + '@' + this.layerData[ind].name.split('@')[0], attributeFilter: "HJGKDYBM like '%" + shiCode[0] + "%' AND HJGKDYBM='" + chaXunBm + "'" })
          } else {
            cxBmData2.push({ name: this.layerData[ind].name.split('@')[0] + '@' + this.layerData[ind].name.split('@')[0], attributeFilter: "(HJGKDYBM like '%" + shiCode[0] + "%' OR HJGKDYBM like '%" + shiCode[1] + "%' ) AND HJGKDYBM='" + chaXunBm + "'" })
          }
          cxBmData3.push(this.layerData[ind].name.split('@')[0] + ":" + this.layerData[ind].name.split('@')[0])
        } else {
          if (shiCode.length == 1) {
            cxBmData.push({ name: this.layerData[ind].name, attributeFilter: "(HJYSGKFQBM like '%" + shiCode[0] + "%' ) AND HJYSGKFQBM='" + chaXunBm + "'" })
          } else {
            cxBmData.push({ name: this.layerData[ind].name, attributeFilter: "(HJYSGKFQBM like '%" + shiCode[0] + "%' OR HJYSGKFQBM like '%" + shiCode[1] + "%' ) AND HJYSGKFQBM='" + chaXunBm + "'" })

          }
        }
      }
      console.log(cxBmData)
      // OR HJGKDYBM like '%"+shiCode[1]+"%' )
      var param = new QueryBySQLParameters({
        queryParams: cxBmData
      });
      var jishu = 0;
      new QueryService(this.url).queryBySQL(param, (serviceResult) => {
        console.log(serviceResult)
        /* hxSource.clear();
         sxSource.clear();
         dxSource.clear();
         yxSource.clear();
         zdSource.clear();
         ybSource.clear();*/
        if (serviceResult.result.totalCount == 0) {
          jishu++
          if (jishu == 2) {
            this.$message.error('未查询到您输入的编码对应的要素，请重新输入(为了不查询到其他团的数据-代管团场数据暂不支持编码查询)')
          }
        } else {
          for (let x = 0; x < serviceResult.result.recordsets.length; x++) {
            if (serviceResult.result.recordsets[x].features.features.length != 0) {
              selectSouce.addFeatures((new GeoJSON()).readFeatures(serviceResult.result.recordsets[x].features))
              if (serviceResult.result.recordsets[x].features.features[0].properties.HJYS == '2') {
                this.popdata2.ysxl = serviceResult.result.recordsets[x].features.features[0].properties.YSXL;
                this.popdata2.fqbm = serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQBM;
                this.popdata2.smc = serviceResult.result.recordsets[x].features.features[0].properties.PROV;
                this.popdata2.djmc = serviceResult.result.recordsets[x].features.features[0].properties.CITY;
                this.popdata2.xmc = serviceResult.result.recordsets[x].features.features[0].properties.COUNTY;
                this.popdata2.hjys = serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQMC;
                this.popdata2.length = serviceResult.result.recordsets[x].features.features[0].properties.Shape_Leng * 100 + '公里';
                this.popdata2.area = (serviceResult.result.recordsets[x].features.features[0].properties.Shape_Area * 10000).toFixed(2) + '平方公里';
                this.popdata2.LYMC = serviceResult.result.recordsets[x].features.features[0].properties.LYMC;
                this.popdata2.HDMC = serviceResult.result.recordsets[x].features.features[0].properties.HDMC;
                this.popdata2.KZDMQDJD = serviceResult.result.recordsets[x].features.features[0].properties.KZDMQDJD;
                this.popdata2.KZDMQDWD = serviceResult.result.recordsets[x].features.features[0].properties.KZDMQDWD;
                this.popdata2.KZDMZDJD = serviceResult.result.recordsets[x].features.features[0].properties.KZDMZDJD;
                this.popdata2.KZDMZDWD = serviceResult.result.recordsets[x].features.features[0].properties.KZDMZDWD;
                this.popxy = false;
                this.popxy1 = false;
                this.popxy2 = true;
                map.addOverlay(pop2);
                pop2.setPosition(serviceResult.result.recordsets[x].features.features[0].geometry.coordinates[0][0][0]);
                map.getView().setCenter(serviceResult.result.recordsets[x].features.features[0].geometry.coordinates[0][0][0]);
              } else {
                this.popdata.ysxl = serviceResult.result.recordsets[x].features.features[0].properties.YSXL;
                this.popdata.fqbm = serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQBM;
                this.popdata.smc = serviceResult.result.recordsets[x].features.features[0].properties.PROV;
                this.popdata.djmc = serviceResult.result.recordsets[x].features.features[0].properties.CITY;
                this.popdata.xmc = serviceResult.result.recordsets[x].features.features[0].properties.COUNTY;
                this.popdata.hjys = serviceResult.result.recordsets[x].features.features[0].properties.HJYSGKFQMC;
                this.popdata.length = serviceResult.result.recordsets[x].features.features[0].properties.Shape_Leng * 100 + '千米';
                this.popdata.area = (serviceResult.result.recordsets[x].features.features[0].properties.Shape_Area * 10000).toFixed(2) + '平方公里';
                this.popxy = true;
                this.popxy1 = false;
                this.popxy2 = false;
                map.addOverlay(popO);
                popO.setPosition(serviceResult.result.recordsets[x].features.features[0].geometry.coordinates[0][0][0]);
                map.getView().setCenter(serviceResult.result.recordsets[x].features.features[0].geometry.coordinates[0][0][0]);
              }
            }
          }
        }
      })
      /*  for(let ind in this.layerData){
         if(this.layerData[ind].name.split('@')[0].indexOf('IntergratedControlUnit')!=-1){
           cxBmData.push({name:this.layerData[ind].name.split('@')[0]+'@'+this.layerData[ind].name.split('@')[0],attributeFilter:"HJGKDYBM like '%"+shiCode+"%' AND HJGKDYBM='" +this.chaXunBm+"'"})
         }else {
           cxBmData.push({name:this.layerData[ind].name.split('@')[0]+'@'+this.layerData[ind].name.split('@')[0],attributeFilter:"HJYSGKFQBM like '%"+shiCode+"%' AND HJYSGKFQBM='" +this.chaXunBm +"'"})
         }
         cxBmData2.push(this.layerData[ind].name.split('@')[0]+":"+this.layerData[ind].name.split('@')[0])
       }*/
      var sqlParam = new GetFeaturesBySQLParameters({
        queryParameter: cxBmData2[0],
        datasetNames: [cxBmData3[0]]
      });
      new FeatureService(this.dataurl).getFeaturesBySQL(sqlParam, (serviceResult) => {
        if (serviceResult.result.totalCount == 0) {
          jishu++;
          if (jishu == 2) {
            this.$message.error('未查询到您输入的编码对应的要素，请重新输入(为了不查询到其他团的数据-代管团场数据暂不支持编码查询)')
          }
        } else {
          selectSouce.addFeatures((new GeoJSON()).readFeatures(serviceResult.result.features))
          this.pop1data.fqbm = serviceResult.result.features.features[0].properties.HJGKDYBM;
          this.pop1data.smc = serviceResult.result.features.features[0].properties.PROV;
          this.pop1data.djmc = serviceResult.result.features.features[0].properties.CITY;
          this.pop1data.xmc = serviceResult.result.features.features[0].properties.COUNTY;
          this.pop1data.hjys = serviceResult.result.features.features[0].properties.HJGKDYMC;
          this.pop1data.length = serviceResult.result.features.features[0].properties.Shape_Leng * 100 + '公里';
          this.pop1data.area = (serviceResult.result.features.features[0].properties.Shape_Area * 10000).toFixed(2) + '平方公里';
          this.pop1data.remakes = serviceResult.result.features.features[0].properties.REMARKS;
          this.popxy = false;
          this.popxy1 = true;
          this.popxy2 = false;
          map.addOverlay(pop1);
          pop1.setPosition(serviceResult.result.features.features[0].geometry.coordinates[0][0][0]);
          map.getView().setCenter(serviceResult.result.features.features[0].geometry.coordinates[0][0][0]);
        }
      });
    },
    changeShi(value) {
      switch (value) {
        case 'd1':
          map.getView().setCenter([81.277840902, 40.547068742]);
          map.getView().setZoom(9)
          break;
        case 'd2':
          map.getView().setCenter([85.672922222, 41.867275]);
          map.getView().setZoom(9)
          break;
        case 'd3':
          map.getView().setCenter([79.071925, 39.867719444]);
          map.getView().setZoom(9)
          break;
        case 'd4':
          map.getView().setCenter([81.037599507, 43.923116438]);
          map.getView().setZoom(9)
          break;
        case 'd5':
          map.getView().setCenter([82.069213889, 44.888722222]);
          map.getView().setZoom(9)
          break;
        case 'd6':
          map.getView().setCenter([87.540233359, 44.16617618]);
          map.getView().setZoom(9)
          break;
        case 'd7':
          map.getView().setCenter([84.901516667, 44.430636111]);
          map.getView().setZoom(9)
          break;
        case 'd8':
          map.getView().setCenter([86.07755, 44.303947222]);
          map.getView().setZoom(9)
          break;
        case 'd9':
          map.getView().setCenter([83.609342141, 46.517751008]);
          map.getView().setZoom(9)
          break;
        case 'd10':
          map.getView().setCenter([87.830919424, 47.325244407]);
          map.getView().setZoom(9)
          break;
        case 'd11':
          map.getView().setCenter([87.595465116, 43.857920905]);
          map.getView().setZoom(9)
          break;
        case 'd12':
          map.getView().setCenter([87.534985988, 43.913105002]);
          map.getView().setZoom(9)
          break;
        case 'd13':
          map.getView().setCenter([93.546963889, 42.825463889]);
          map.getView().setZoom(9)
          break;
        case 'd14':
          map.getView().setCenter([79.28838135, 37.209817352]);
          map.getView().setZoom(9)
          break;
        case 'd0':
          map.getView().setCenter([85.28838135, 42.209817352]);
          map.getView().setZoom(6)
          break;
      }
    },
    ifTuliShow(name) {
      if (this.tuliData.indexOf(name) == -1) {
        return false
      } else {
        return true
      }
    },
    hot() {
      if (this.hotname == '单元热力图') {
        var heatPoints = [];
        var radius = 6;
        var blur = 18;
        var sqlParam = new GetFeaturesBySQLParameters({
          queryParameter: {
            name: "IntergratedControlUnit兵团@IntergratedControlUnit兵团",
          },
          toIndex: -1,
          datasetNames: ["IntergratedControlUnit兵团:IntergratedControlUnit兵团"]
        });
        this.fullscreenLoading = true;
        new FeatureService(this.dataurl).getFeaturesBySQL(sqlParam, (serviceResult) => {
          for (let i = 0; i < serviceResult.result.features.features.length; i++) {
            heatPoints.push(new Feature(new Point(new olExtent.getCenter((new GeoJSON()).readFeature(serviceResult.result.features.features[i]).getGeometry().getExtent()))))
          }
          this.fullscreenLoading = false;
          heatMap = new Heatmap({
            source: new VectorSource({
              features: heatPoints,
              wrapX: false
            }),
            blur: blur,
            radius: radius
          });
          map.addLayer(heatMap);
        });
        this.hotname = '关闭热力图'
      } else if (this.hotname == '关闭热力图') {
        map.removeLayer(heatMap);
        this.hotname = '单元热力图'
      }

    },
    async sanwei() {
      var mapele = document.getElementById('map');
      var sanweiele = document.getElementById('cesiumContainer');
      if (this.sw3d == '三维展示') {
        this.sw3d = '回到地图';
        this.infoZk = false;
        mapele.style.display = "none"
        document.getElementById('toptool').style.display = "none";
        //document.getElementById('tulishow').style.display="none";
        document.getElementById('tools').style.display = "none"
        document.getElementById('sanweitools').style.display = "block";
        //document.getElementById('tulishow3D').style.display="block";
        sanweiele.style.display = "block"
        viewer = new Cesium.Viewer("cesiumContainer", {
          infoBox: false,
          selectionIndicator: false,
        });
        var token = "8a243ae9560f31b213caed2889958c5c";
        var provider = new Cesium.TiandituTerrainProvider({
          token: token
        });
        viewer.terrainProvider = provider;
        viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          //   url: 'http://localhost:8090/iserver/services/map-tianditu/rest/maps/%E5%BD%B1%E5%83%8F%E5%BA%95%E5%9B%BE_%E7%BB%8F%E7%BA%AC%E5%BA%A6',
          // url: 'http://10.226.77.11:8090/iserver/services/map-tianditu/rest/maps/%E5%BD%B1%E5%83%8F%E5%BA%95%E5%9B%BE_%E7%BB%8F%E7%BA%AC%E5%BA%A6',
          // url: 'http://59.223.239.59:8808/iserver/services/map-tianditu/rest/maps/%E5%BD%B1%E5%83%8F%E5%BA%95%E5%9B%BE_%E7%BB%8F%E7%BA%AC%E5%BA%A6',
          url: this.tdtyxurl,
          maximumLevel: 16
        }));
        //去掉超图logo
        viewer._cesiumWidget._creditContainer.style.display = "none";
        viewer.scene.globe.depthTestAgainstTerrain = false
        viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
          mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
          token: '8a243ae9560f31b213caed2889958c5c'
        }));

        /*  viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            url: 'http://localhost:8090/iserver/services/map-shp-sanwei/rest/maps/sanwei'
          }));*/
        viewer.camera.flyTo({
          destination: new Cesium.Cartesian3(573979.5210909306, 6645021.125467267, 3756712.322069217),
          orientation: {
            heading: 0.08381673109250265,
            pitch: -0.8028333317057883,
            roll: 0.00010812814258187586,
          },
          complete: function callback() {
            // 定位完成之后的回调函数
          },
        })

        //    const {data:result}= await this.$http.get('http://localhost:8081/shi.json');
        //   const {data:result}= await this.$http.get('http://10.16.11.240:15487/shi.json');
        const { data: result } = await this.$http1.get('./shi.json');
        for (var i = 0; i < result.length; i++) {
          viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(result[i].经度, result[i].纬度, 1550),
            label: {
              text: result[i].标准名,
              showBackground: true,
              backgroundColor: new Cesium.Color(0, 0.65, 1, 1),
              font: 'normal 16px bold 微软雅黑',
              //distanceDisplayCondition:new Cesium.DistanceDisplayCondition ( 0 , 1500000)
            },
          })
        }
        var dataSource = Cesium.GeoJsonDataSource.load(
          "./xj.json",
        );
        dataSource.then(dataS => {
          viewer.dataSources.add(dataS);
          var entities = dataS.entities.values;
          for (let z = 0; z < entities.length; z++) {
            var entity = entities[z];
            entity.polygon.material = new Cesium.Color(0, 0.65, 1, 0.1);
            entity.polygon.outlineColor = new Cesium.Color(255 / 255, 166 / 255, 0 / 255, 1);
            //entity.polygon.outlineWidth=50;
            entity.polygon.material = true;
            entity.polygon.extrudedHeight = 10000;
          }
        })
        for (let ix = viewer.imageryLayers.length - 1; ix >= 3; ix--) {
          viewer.imageryLayers.remove(viewer.imageryLayers.get(ix))
        }
        if (window.sessionStorage.getItem('shi') == '65') {
          for (let s = 0; s < this.lname.length; s++) {
            viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
              //      url: 'http://localhost:8090/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
             url: 'https://10.226.77.11/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
            //   url: 'https://49.119.98.88:8810/iserver/services/map-shp-' + this.lname[s].substring(0, this.lname[s].length - 2) + 'BingTuan/rest/maps/' + this.lname[s]
            //     url: 'https://59.223.239.59:8807/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
               //   url: 'https://10.222.77.11:8807/iserver/services/map-shp-'+this.lname[s].substring(0,this.lname[s].length-2)+'BingTuan/rest/maps/'+this.lname[s]
            }));
          }
        } else {
          this.$message.error('由于您是师级用户，故只能在地球上看到单元图层！')
          viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            //     url: 'http://localhost:8090/iserver/services/map-shp-sanwei/rest/maps/sanwei'
            url: 'https://10.226.77.11/iserver/services/map-shp-sanwei/rest/maps/sanwei'
            //url: 'https://49.119.98.88:8810/iserver/services/map-shp-sanwei/rest/maps/sanwei'
          //     url: 'https://59.223.239.59:8807/iserver/services/map-shp-sanwei/rest/maps/sanwei'
           //    url: 'https://10.222.77.11:8807/iserver/services/map-shp-sanwei/rest/maps/sanwei'
          }));
        }
        //初始化测量距离
        handlerDis = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Distance, clampMode);
        //注册测距功能事件
        handlerDis.measureEvt.addEventListener((result) => {
          var dis = Number(result.distance);
          var selOptV = this.liangsuan;
          var positions = result.positions;
          if (selOptV == 3 || selOptV == 4) {
            dis = Number(this.calcClampDistance(positions));
          }
          var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
          handlerDis.disLabel.text = '距离:' + distance;
        });
        handlerDis.activeEvt.addEventListener(function (isActive) {
          if (isActive == true) {
            viewer.enableCursorStyle = false;
            viewer._element.style.cursor = '';
            document.body.classList.toggle("measureCur", false);
            document.body.classList.toggle("measureCur", true);
          }
          else {
            viewer.enableCursorStyle = true;
            document.body.classList.toggle("measureCur", false);
          }
        });
        //初始化测量面积
        handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode);
        handlerArea.measureEvt.addEventListener((result) => {
          var mj = Number(result.area);
          var selOptV = this.liangsuan;
          var positions = result.positions;
          if (selOptV == 3 || selOptV == 4) {
            mj = Number(this.calcClampValue(positions));
          } else if (selOptV == 5) {
            mj = Number(this.calcAreaWithoutHeight(positions));
          }
          var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
          handlerArea.areaLabel.text = '面积:' + area;
        });
        handlerArea.activeEvt.addEventListener(function (isActive) {
          if (isActive == true) {
            viewer.enableCursorStyle = false;
            viewer._element.style.cursor = '';
            document.body.classList.toggle("measureCur", false);
            document.body.classList.toggle("measureCur", true);
          }
          else {
            viewer.enableCursorStyle = true;
            document.body.classList.toggle("measureCur", false)
          }
        });
        //初始化测量高度
        handlerHeight = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.DVH);
        handlerHeight.measureEvt.addEventListener((result) => {
          var distance = result.distance > 1000 ? (result.distance / 1000).toFixed(2) + 'km' : result.distance + 'm';
          var vHeight = result.verticalHeight > 1000 ? (result.verticalHeight / 1000).toFixed(2) + 'km' : result.verticalHeight + 'm';
          var hDistance = result.horizontalDistance > 1000 ? (result.horizontalDistance / 1000).toFixed(2) + 'km' : result.horizontalDistance + 'm';
          handlerHeight.disLabel.text = '空间距离:' + distance;
          handlerHeight.vLabel.text = '垂直高度:' + vHeight;
          handlerHeight.hLabel.text = '水平距离:' + hDistance;
        });
        handlerHeight.activeEvt.addEventListener(function (isActive) {
          if (isActive == true) {
            viewer.enableCursorStyle = false;
            viewer._element.style.cursor = '';
            document.body.classList.toggle("measureCur", false);
            document.body.classList.toggle("measureCur", true);
          }
          else {
            viewer.enableCursorStyle = true;
            document.body.classList.toggle("measureCur", false)
          }
        });
        //点击查询
        var infoboxContainer = document.getElementById("bubble");
        var scene = viewer.scene;
        var scenePosition = null; // 记录在场景中点击的笛卡尔坐标点
        scene.postRender.addEventListener(function () { // 每一帧都去计算气泡的正确位置
          if (scenePosition) {
            var canvasHeight = scene.canvas.height;
            var windowPosition = new Cesium.Cartesian2();
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
            infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
            infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
            infoboxContainer.style.visibility = "visible";
          }
        });
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        handler.setInputAction((e) => {
          // 获取点击位置笛卡尔坐标
          var position = scene.pickPosition(e.position);
          if (!position) {
            position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
          }
          scenePosition = position; // 气泡相关 2/4
          // 从笛卡尔坐标获取经纬度
          var cartographic = Cesium.Cartographic.fromCartesian(position);
          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
          var height = cartographic.height;
          this.doGeoSelect(longitude, latitude)
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      } else {
        this.sw3d = '三维展示';
        for (let ind in this.lname) {
          this.cxdata1.push(this.lname[ind] + ":" + this.lname[ind])
        }
        if (window.sessionStorage.getItem('shi') == '65') {
          this.setLayerStatus();
          //this.cxLayerBingTuan()
        } else {
          this.cxLayer();
        }
        sanweiele.style.display = 'none';
        mapele.style.display = 'block';
        document.getElementById('toptool').style.display = "block";
        //document.getElementById('tulishow3D').style.display="none";
        //document.getElementById('tulishow').style.display="block";
        document.getElementById('tools').style.display = "block"
        document.getElementById('sanweitools').style.display = "none"
        document.getElementById('map').style.width = '100%';
        map.updateSize();
      }
    },
    doGeoSelect(x, y) {
      var lastHouseEntity = null
      var sPoint = new Point([x, y]);
      var geometryParam = new GetFeaturesByGeometryParameters({
        datasetNames: ["IntergratedControlUnit兵团:IntergratedControlUnit兵团"],
        geometry: sPoint,
        spatialQueryMode: "INTERSECT"
      });
      new FeatureService(this.dataurl).getFeaturesByGeometry(geometryParam, (serviceResult) => {
        console.log(serviceResult)
        if (serviceResult.result.features.features.length == 0) {
          return;
        }
        if (lastHouseEntity) {
          viewer.entities.remove(lastHouseEntity);
          lastHouseEntity = null;
        }
        var selectedFeature = serviceResult.result.features.features[0];
        if (!selectedFeature) {
          scenePosition = null;
          $("#bubble").hide();
          return;
        }
        /* var points3D = [];
         for (let i=0;i<selectedFeature.geometry.coordinates.length;i++) {
             for(let j=0;j<selectedFeature.geometry.coordinates[i].length;j++){
               points3D.push(selectedFeature.geometry.coordinates[i][j][0],selectedFeature.geometry.coordinates[i][j][1])
             }
         }
         console.log(points3D)*/
        var infoboxContainer = document.getElementById("bubble");
        var table = document.getElementById("tab"); // 气泡内的表格
        infoboxContainer.style.display = 'block';
        console.log(selectedFeature)
        this.pop1data3d.fqbm = selectedFeature.properties.HJGKDYBM;
        this.pop1data3d.smc = selectedFeature.properties.PROV;
        this.pop1data3d.djmc = selectedFeature.properties.CITY;
        this.pop1data3d.xmc = selectedFeature.properties.COUNTY;
        this.pop1data3d.hjys = selectedFeature.properties.HJGKDYMC;
        this.pop1data3d.length = selectedFeature.properties.Shape_Leng * 100 + '公里';
        this.pop1data3d.area = (selectedFeature.properties.Shape_Area * 10000).toFixed(2) + '平方公里';
        this.pop1data3d.remakes = selectedFeature.properties.REMARKS;
      })
    },
    closePop3d() {
      document.getElementById("bubble").style.display = 'none';
    },
    getPic() {
      var scene = viewer.scene;
      var promise = scene.outputSceneToFile();
      Cesium.when(promise, (base64data) => {
        this.download(base64data);
      })
    },
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    download(base64data) {
      var image = new Image();
      image.src = base64data;
      image.onload = () => {
        var canvas = this.convertImageToCanvas(image);
        var picurl_1 = canvas.toDataURL("image/jpeg");
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.download = (new Date()).getTime() + ".jpg"; // 指定下载图片的名称
        a.href = picurl_1;
        a.dispatchEvent(event); // 触发超链接的点击事件
      }
    },
    changeLiangSuan() {
      var value = this.liangsuan;
      console.log(value)
      document.getElementById('distance').style.display = "inline-block";
      document.getElementById('height').style.display = "inline-block";
      if (value == '1') {
        clampMode = 0;
        handlerArea.clampMode = 0;
        handlerDis.clampMode = 0;
      }
      else {
        clampMode = 1;
        handlerArea.clampMode = 1;
        handlerDis.clampMode = 1;
        if (value == '5') {
          document.getElementById('distance').style.display = "none";
          document.getElementById('height').style.display = "none";
        } else if (value == '3' || value == '4') {
          document.getElementById('height').style.display = "none";
        }
      }
    },
    //椭球贴地距离
    calcClampDistance(positions) {
      var lonlat = [];
      var value = 0;
      for (var i = 0; i < positions.length; i++) {
        var cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
        var lon = Cesium.Math.toDegrees(cartographic.longitude);

        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        lonlat.push(lon, lat);
      }

      var gemetry = new Cesium.PolylineGeometry({
        positions: Cesium.Cartesian3.fromDegreesArray(lonlat)
      });


      var selOptV = $("#selOpt").val();
      if (selOptV == 3) {
        value = scene.globe.computeSurfaceDistance(gemetry, Cesium.Ellipsoid.CGCS2000);

      } else if (selOptV == 4) {
        value = scene.globe.computeSurfaceDistance(gemetry, Cesium.Ellipsoid.XIAN80);
      }
      return value;
    },
    //椭球贴地面积
    calcClampValue(positions) {
      var lonlat = [];
      var value = 0;
      for (var i = 0; i < positions.length; i++) {
        var cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
        var lon = Cesium.Math.toDegrees(cartographic.longitude);

        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        lonlat.push(lon, lat);
      }

      var gemetry = new Cesium.PolygonGeometry.fromPositions({
        positions: Cesium.Cartesian3.fromDegreesArray(lonlat)
      });

      var selOptV = $("#selOpt").val();
      if (selOptV == 3) {
        value = scene.globe.computeSurfaceArea(gemetry, Cesium.Ellipsoid.CGCS2000);

      } else if (selOptV == 4) {
        value = scene.globe.computeSurfaceArea(gemetry, Cesium.Ellipsoid.XIAN80);
      }
      return value;
    },
    calcAreaWithoutHeight(positions) {
      var totalLon = 0;
      for (var i = 0; i < positions.length; i++) {
        var cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
        var lon = Cesium.Math.toDegrees(cartographic.longitude);
        totalLon += lon;
      }



      var dh = Math.round((totalLon / positions.length + 6) / 6);//带号
      var centralMeridian = dh * 6 - 3;
      //高斯投影
      var projection = new Cesium.CustomProjection({
        name: "tmerc",
        centralMeridian: centralMeridian,
        primeMeridian: 0,
        standardParallel_1: 0,
        standardParallel_2: 0,
        eastFalse: 500000.0,
        northFalse: 0.0,
        semimajorAxis: 6378137,
        inverseFlattening: 298.257222101

      });
      var cartesians = [];
      for (var i = 0; i < positions.length; i++) {
        var cartographic = Cesium.Cartographic.fromCartesian(positions[i]);

        var cartesian = projection.project(cartographic);
        cartesians.push(cartesian);
      }

      cartesians.push(cartesians[0]);//首尾相接
      var value = Cesium.getPreciseArea(cartesians, "China2000", centralMeridian, dh, 1);
      return value;
    },
    ceju3D() {
      this.deactiveAll();
      handlerDis && handlerDis.activate();
    },
    cemian3D() {
      this.deactiveAll();
      handlerArea && handlerArea.activate();
    },
    cegao3D() {
      this.deactiveAll();
      handlerHeight && handlerHeight.activate();
    },
    clear3D() {
      handlerDis && handlerDis.clear();
      handlerArea && handlerArea.clear();
      handlerHeight && handlerHeight.clear();
    },
    deactiveAll() {
      handlerDis && handlerDis.deactivate();
      handlerArea && handlerArea.deactivate();
      handlerHeight && handlerHeight.deactivate();
    },
    erase(geom) {
      var extent = [-180, -90, 180, 90];
      var polygonRing = new fromExtent(extent);
      var coords = geom.getCoordinates();
      var linearRing = new LinearRing(coords[0]);
      polygonRing.appendLinearRing(linearRing);
      return polygonRing;
    },
    jwdzshjz(dongjingbz) {
      var d = parseInt(dongjingbz);
      var d1 = ((dongjingbz - d) * 60);
      var f = parseInt(d1);
      var m = ((d1 - f) * 60).toFixed(1);
      var dfm = d + "°" + f + "′" + m + "″";
      return dfm;
    },
    jwdzsjz(du, fen, miao) {
      return Math.abs(du) + (Math.abs(fen) / 60 + Math.abs(miao) / 3600);
    },
    hzPoint() {
      if (Number(this.jdu) <= -180 || Number(this.jdu) >= 180 || Number(this.wdu) <= -180 || Number(this.wdu) >= 180) {
        this.$message.error('您输入的经纬度不合法，请重新输入')
      } else {
        var x = this.jwdzsjz(Number(this.jdu), Number(this.jfen), Number(this.jmiao));
        var y = this.jwdzsjz(Number(this.wdu), Number(this.wfen), Number(this.wmiao));
        var hzgeometry = new Point([x, y]);
        pSource.addFeature(new Feature(hzgeometry))
        map.getView().setCenter(olExtent.getCenter(hzgeometry.getExtent()))
      }
    },
    clearPoint() {
      this.jdu = '', this.jfen = '', this.jmiao = '', this.wdu = '', this.wfen = '', this.wmiao = '';
      pSource.clear();
    }
  }
}
</script>


<style  lang="less" scoped>
.el-checkbox__label {
  font-size: 18px !important;
}

.mapMain {
  position: absolute;
  left: 19.5%;
  //height: 87%;
  top: 9.5%;
  bottom: 1.5%;
  width: 79.5%;
  background-color: #ffffff;
  border-radius: 8px !important;
  //width: 100%;
  //height: 100%;
  box-shadow: 0 0 5px #acc4fe;
}

#map {
  //float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
}

#mapInfo {
  float: left;
  right: 0px;
  max-width: 30%;
  height: 99%;
  max-height: 99%;
  background-color: #333744;
  word-wrap: break-word;
  word-break: break-all;
  overflow: auto;
  line-height: 1
}

.param-container {
  background-color: #fff;
  padding-right: 20px;
  //color: #04F7F9;
  //border: 1px solid #526f82;
  border-radius: 45px;
}

.tlb {
  color: #4b4e53;
  font-size: 14px;
  padding-left: 3px;
  padding-right: 3px;
  //border: 1px solid #333;
  //box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
  //background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.49), rgba(51, 51, 51, 0.55));
}

.ol-popup {
  position: absolute;
  background-color: white;
  width: 200px;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 18px;
  padding-bottom: 5px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 300px;
  /* background: rgba(59,88,119,1);
    color: #04F7F9;*/
  background: rgba(255, 255, 255, 1);
  color: #000000;
}

.poptable {
  width: 100%;
  font-size: 14px;
  font-family: "\5FAE\8F6F\96C5\9ED1";
  border: 1px solid #ccc;
  border-width: 0 1px 1px 0;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
  text-align: center;
}

.poptable tr td,
.poptable tr th {
  line-height: 36px;
  font-size: 14px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-width: 1px 0 0 1px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;

}

/deep/.iconfont {
  margin: 0;
}

/deep/ .el-input__inner {
  border-radius: 45px;
}

.ol-popup:after {
  border-top-color: rgba(255, 255, 255, 1);
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "888";
}

.popx {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 4px 0 0;
  text-align: center;
  width: 18px;
  height: 14px;
  font: 16px/14px Tahoma, Verdana, sans-serif;
  color: #c3c3c3;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}

.spana {
  color: #99FF00;
  margin-right: 12px;
  font-size: 15px;
  text-decoration: none;
}

#rightCard {
  /deep/ .el-card__body {
    padding: 0;
  }

  /* /deep/ .is-top{
       background-color: rgb(51, 55, 68);
       color: #909399;
     /deep/ .is-active{
       color: #409EFF;
     }
     }*/

}

#toolcontrol {
  margin-right: 10px;

  ::v-deep .el-button:focus,
  .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);
  }

  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
}

#othertool {

  ::v-deep .el-button:focus,
  .el-button:hover {
    color: #3ee8c2;
  }

  ::v-deep .el-button--goon:active {
    color: #3ee8c2;
    outline: 0;
  }
}

.buttonstyle {
  /deep/.el-button {
    padding: 4px 15px;
  }
}

/deep/ .el-card__header {
  padding: 10px 20px;
}

/deep/ .el-card {
  border-radius: 8px;
}

.poptable td {
  line-height: 24px !important;
}

#toptool {
  position: absolute;
  margin-left: 4%;
  margin-top: 1%;
}

.bubble {
  text-align: center;
  position: absolute;
  padding: 15px;
  margin: 0px;
  background: #fff;
  max-width: 330px;
  max-height: 400px;
  z-index: 9999999;
}

.bubble:after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50px;
  border-width: 0 20px 50px 0px;
  border-style: solid;
  border-color: transparent #fff;
  display: block;
  width: 0;
}

#tab thead,
#tab tr {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(211, 202, 221);
}

#tab {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(211, 202, 221);
  height: 300px;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
}

#tab td,
#tab th {
  padding: 5px 8px;
  font-size: 13px;
  font-family: Verdana;
  color: rgb(95, 74, 121);
  border: 1px solid rgb(193, 168, 223);
}

/* Alternating background colors */
#tab tr:nth-child(even) {
  background: rgb(223, 216, 232)
}

#tab tr:nth-child(odd) {
  background: #FFF
}

.fui-cross:before {
  content: "\e609";
}

#sanweitools {
  /deep/ .el-input__inner {
    height: 32px;
  }
}

#warntitle {
  /deep/ .el-alert__closebtn {
    top: 15px;
    right: 10px;
  }
}

.inputPoint {
  width: 35px !important;

  /deep/ .el-input__inner {
    border-radius: 0;
    padding: 0;
    width: 35px;
    height: 30px;
  }
}
</style>
